CODEWITHSUNDEEP
extjssencha-touchsencha-touch-2
Graham
Graham

Reputation: 5884

Titlebar not showing items Sencha Touch 2

I extended Ext.TitleBar in my app and I'm adding and removing the extended bar dynamically when a user presses a button. Here's my class

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

    ]
});

None of the items are showing up. When I press the button the settingsbar is added to my view but none of the buttons are showing up. When I inspect the element in Chrome the DOM doesn't show any buttons either. So it's like the items portion of the extended TitleBar is being skipped.

Anyone know why the buttons aren't showing up?

Upvotes: 0

Views: 285

Answers (1)

rixo
rixo

Reputation: 25001

Your config is ignored. In Touch, when extending from a class, every overridden config option must be put inside the config property of your class definition.

This way, it will work:

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

Upvotes: 1

Related Questions