"closable : true" 面板顶部未显示关闭图标（sencha touch 2.4）

Question

下面是我的代码，它将面板显示为弹出窗口，我可以看到视频，但面板顶部没有关闭图标。正如我们提供的 "closable : true" ，关闭图标应该出现在顶部。

        Ext.Viewport.add(Ext.create('Ext.Panel', {
            width: '500px',
            left: '5%',
            padding: 10,
            top: '0%',
            title: 'Foo',
            floating: true,
            closable : true,
            layout: 'fit',
            height: '380px',
            html: ['<iframe frameBorder="0" scrolling="no" width = "480" height = "360" src = ""></iframe>']
    }));

下面是fiddlerlink

fiddle.sencha.com/#view/editor&fiddle/1trn

Answer 1

Sencha Touch Panel 没有任何 closable 属性像 extjs.We 需要创建我们自己的按钮来实现它。

Ext.application({
    name: 'Fiddle',

    launch: function () {
   Ext.Viewport.add(Ext.create('Ext.Panel', {
            width: '500px',
            left: '5%',
            padding: 10,
            top: '0%',
            title: 'Foo',
            floating: true,
            closable : true,
            layout: 'fit',
            height: '380px',
            items:{
                xtype:'button',
                right:0,
                top:0,
                  ui: 'plain',
               iconCls:'delete',
               handler:function(button){
                   button.up().destroy();
               }
            },
            html: ['']
})
);

    }
});

<link rel="stylesheet" href="https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css"><script type="text/javascript" src="https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all-debug.js"></script>

"closable : true" 面板顶部未显示关闭图标（sencha touch 2.4）

"closable : true" not showing close icon on top of the panel ( sencha touch 2.4)

extjs

extjs5