Extjs 4 Designer 1.2 Tab Panel

Question

I am working with ExtJs 4.0 ( Ext Designer 1.2.0). I have a panel with card layout which contains a button(add tab btn) and a tab panel. Each tab contains a separate toolbar with button. Add tab btn would add Tab2 if it is closed.

I observed that when I run the application, event on 2nd tab's button can be executed but if I close the second tab and add it dynamically from add tab btn, event won't be executed.

Any suggestions??

Following is my code : (MyPanel.js)

    Ext.define('MyApp.view.MyPanel', {
    extend: 'MyApp.view.ui.MyPanel',

    initComponent: function() {
        var me = this;
        me.callParent(arguments);

    me.down('button[id=addTab]').on('click',me.onAddTabClick,me);
    me.down('button[text=Second Button]').on('click',me.onSecondBtnClick,me);
    },

    onSecondBtnClick: function(){
        alert("Second Btn");
    },

    onAddTabClick: function(){

        var myTab = this.down('#myTabPanel').child('#tab2');
        if (myTab) {
            myTab.show();
        } else {
            this.down('#myTabPanel').add({
                    title    : 'Tab2',
                    activeTab: 0,
                    closable : true ,
                    id: 'tab2',
                    items: [{
                        xtype: 'panel',
                        id: 'tab2',
                        closable: true,
                        title: 'Tab 2',
                        dockedItems: [
                            {
                                xtype: 'toolbar',
                                height: 29,
                                id: 'Tab2Toolbar',
                                dock: 'top',
                                items: [
                                    {
                                        xtype: 'button',
                                        text: 'Second Button'
                                    }
                                ]
                            }
                        ]
                    }]  
                }).show();
        }
    }   
});

John Krull John Krull · Accepted Answer · 2012-01-13T14:54:32

I'm guessing that because you're using initComponent instead of init, the event is only getting applied once, when MyPanel is first loaded. If you use the init config instead, I believe it properly applies your events whether the button has been destroyed already or not.

In short, try removing your initComponent block and replacing it with this, as init is the "proper" ExtJS 4 way for setting up events:

init: function (){
  this.control({
    'button[id=addTab]': {
      click: this.onAddTabClick
    },
    'button[text=Second Button]':{
      click : this.onSecondBtnClick 
    }
  });
}

(This code is from a controller, not specifically a panel, so while I hope it works right away, keep in mind that it may require some modification. Don't forget your comma!)

Extjs 4 Designer 1.2 Tab Panel

1 Answers