“closable：true”未在面板顶部显示关闭图标（sencha touch 2.4）

Question

下面是我的代码，显示面板作为弹出窗口，我能够看到视频，但我没有得到面板顶部的关闭图标。 由于我们提供“可关闭：真实”，因此顶部应显示关闭图标。

        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>']
    }));

以下是fiddler链接

  

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

Answer 1

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

＆＃13;

＆＃13;

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: ['']
})
);

    }
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;