Extjs 4 Designer 1.2 选项卡面板

Question

我正在使用 ExtJs 4.0（Ext Designer 1.2.0）。 我有一个带有卡片布局的面板，其中包含一个按钮（添加选项卡 btn）和一个选项卡面板。每个选项卡都包含一个带有按钮的单独工具栏。如果 Tab2 关闭，添加选项卡 btn 将添加 Tab2。

我观察到，当我运行应用程序时，可以执行第二个选项卡按钮上的事件，但如果我关闭第二个选项卡并从添加选项卡 btn 动态添加它，则事件将不会被执行。

有什么建议吗？

以下是我的代码：（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();
        }
    }   
});

Answer 1

我猜测，因为您使用的是 initComponent 而不是 init，所以该事件仅在首次加载 MyPanel 时应用一次。如果您使用 init 配置，我相信无论按钮是否已被销毁，它都会正确应用您的事件。

简而言之，尝试删除 initComponent 块并用此替换它，因为 init 是设置事件的“正确”ExtJS 4 方法：（

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

此代码来自控制器，而不是专门的面板，因此虽然我希望它能立即生效，但请记住它可能需要一些修改，不要忘记你的逗号！）