Question

我在我的应用程序中扩展了Ext.TitleBar，当用户按下按钮时，我正在动态添加和删除扩展栏。这是我的班级

Ext.define('MeterReadingsApp.view.mainsupport.SettingsBar', {
    extend: 'Ext.TitleBar',
    xtype: 'settingsbar',
    docked: 'top',
    items:[
           {xtype: 'spacer'},{
               xtype: 'button',
               id: 'btnSync',
               text: 'Sync',
               align: 'right'
           }, {xtype: 'spacer'},
           {
               xtype: 'button',
               id: 'btnCampus',
               text: 'Campus On',
               align: 'right'
           }, {xtype: 'spacer'},
           {
               xtype: 'button',
               id: 'btnUtility',
               text: 'Utility Off',
               align: 'right'
           }, {xtype: 'spacer'},
           {
               xtype: 'button',
               id: 'btnLogout',
               text: 'Logout',
               align: 'right'
           }

    ]
});

没有任何项目出现。当我按下按钮时，settingsbar被添加到我的视图中，但没有任何按钮出现。当我在Chrome中检查元素时，DOM也没有显示任何按钮。所以就像跳过扩展的TitleBar的items部分一样。

有人知道按钮没有出现的原因吗？

Answer 1

您的配置将被忽略。在Touch中，从类扩展时，每个重写的配置选项都必须放在类定义的config属性中。

通过这种方式，它可以工作：

Ext.define('MeterReadingsApp.view.mainsupport.SettingsBar', {
    extend: 'Ext.TitleBar',
    config: {
        xtype: 'settingsbar',
        docked: 'top',
        items: [{
            xtype: 'spacer'
        },{
            xtype: 'button',
            id: 'btnSync',
            text: 'Sync',
            align: 'right'
        },{
            xtype: 'spacer'
        },{
            xtype: 'button',
            id: 'btnCampus',
            text: 'Campus On',
            align: 'right'
        },{
            xtype: 'spacer'
        },{
            xtype: 'button',
            id: 'btnUtility',
            text: 'Utility Off',
            align: 'right'
        },{
            xtype: 'spacer'
        },{
            xtype: 'button',
            id: 'btnLogout',
            text: 'Logout',
            align: 'right'
        }]
    }
});

标题栏没有显示项目Sencha Touch 2

1 个答案: