Html Sencha touch 2中的面板覆盖层

我一直在使用sencha touch 2开发一个应用程序。
顶部有一个工具栏，其中包含一个按钮。
当我点击这个按钮，我将有一个面板覆盖。 在这个面板中，我想要两个项目：

    var shareButton = {
                    xtype : 'button',
                    ui: 'action',
                    width:'36px',
                    height:'36px',  
                    handler : function(){ 
                    var panel=Ext.create('Ext.Panel',{
            right: 0,
            top: 20,
            modal: true,
            hideOnMaskTap: true,
            hidden: true,   
            width: 260,
            height:'70%' ,
        styleHtmlContent: true,
            scrollable: true,

items: [
{html:'<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://www.google.com" data-lang="en">Tweet</a></body>',},
{html:'<div ><class="fb-like" data-href="http://test.com" data-send="false" data-layout="button_count" data-width="4" data-show-faces="false"></div>'}]});
    Ext.Viewport.add(panel);
    panel.show();}};

var共享按钮={
xtype:'按钮'，
用户界面：“行动”，
宽度：'36px'，
高度：'36px'，
处理程序：函数（）{
变量面板=Ext.create（'Ext.panel'{
右:0,，
前20名，
莫代尔：是的，
hideOnMaskTap：没错，
隐藏：是的，
宽度：260，
高度：'70%'，
styleHtmlContent:对，
可滚动：对，
项目：[
{html:''，}，
{html:'}]}）；
Ext.Viewport.add（面板）；
panel.show（）；}}；

但这不起作用。
事实上，我想让第一个用户将我引向twitter以共享URL（www.google.com）。
第二个到facebook分享“test.com”。

不幸的是，面板中没有显示任何内容。

---

谢谢。

这对我很有用。唯一的问题是，类似Facebook的按钮没有大小，因此您无法看到它

确保浮动面板不可滚动。如果它是可滚动的，给它一个固定的宽度和高度

更新

下面是Sencha小提琴的一个例子：

---

确保正在将面板添加到

Ext.Viewport

中，因为在加载页面后会调用覆盖，所以应再次呈现facebook和twitter按钮

这是显示覆盖后应添加的代码

FB.XFBML.parse();//facebook
$.ajax({ url: 'http://platform.twitter.com/widgets.js', dataType: 'script', cache:true}); //twitter

---

我尝试了两种情况：1）可滚动和固定宽度和高度，2）可滚动错误。不固定我遵循了你的示例。面板实际上正在工作，但类似FB的按钮没有出现，twitter图标也没有显示：仅出现tweet一词，允许我访问twitter.com，这是因为类似Facebook的按钮没有固定的高度。因此，您需要在CSS中设置样式，或者使用容器中的

width

和

height

属性。