CODEWITHSUNDEEP
extjsextjs4.1extjs4.2
ida
ida

Reputation: 545

Button added to toolbar is not working in Extjs 4.2

Ext.define('CCCC.view.Header', {
extend: 'Ext.toolbar.Toolbar',
requires: ['CCCC.view.header.MasterLogo',
            'Ext.button.Button'],
alias: 'widget.mainheader',
itemId : 'header',
width: '100%',
height: 100,
renderTo: document.body,




initComponent: function() {
    var me = this;
    me.items = [

        {
            xtype: 'tbfill' 
        },
        {
            xtype: 'tbseparator'
        },
        {
            xtype: 'button',
            text: 'Logout',
            itemId: 'logout',
            listeners: {
               handler: function() {
                    var me = button.up('WidgetName');
                    me.fireEvent('logoutClicked', button, e);
                    Ext.log('logout clicked');
               }
            }
        },

i have added the logout button to the toolbar as xtype. it is showing as lable , not able to click the "logout" button. Please let me know why "logout" button is not clickable ?

Upvotes: 0

Views: 776

Answers (1)

matt
matt

Reputation: 4047

The handler should be in the button config, not in the button's listener config:

{
    xtype: 'button',
    text: 'Logout',
    itemId: 'logout',
    handler: function() {
        var me = button.up('WidgetName');
        me.fireEvent('logoutClicked', button, e);
        Ext.log('logout clicked');
    }
}

Alternatively, if you want to use a listener, you should listen to the click event instead:

{
    xtype: 'button',
    text: 'Logout',
    itemId: 'logout',
    listeners: {
        click: function() {
            var me = button.up('WidgetName');
            me.fireEvent('logoutClicked', button, e);
            Ext.log('logout clicked');
        }
    }
}

Upvotes: 2

Related Questions