javascript - 混合配置对象和 Ext.create 定义的对象会创建不可点击的面板

Question

如果我有一个应用程序，其中包含使用 Ext.create 创建的面板，并且这些面板具有使用 Ext.create 和配置对象创建的项目，我得到其界面完全不可点击且不响应任何交互的面板。

我创建了a sample JSFiddle这说明了这个问题。单击“测试”按钮查看此失败的示例。

Answer 1

您无法在类定义时创建组件。也就是说，直接在 Ext.define 的配置对象中使用 Ext.create:

Ext.define('App.views.Panel1', {
    id:'panel1',
    extend:'Ext.Panel',
    config:{
        title: 'test',
        layout:'card',
        items:[
            {
                items:[
                    {
                        xtype: 'button',
                        text: 'TEST',
                        handler:function(){
                            Ext.getCmp('panel1').setActiveItem(Ext.getCmp('panel2'));
                        }
                    }
                ]
            },
            // not good
            Ext.create('App.views.Panel2', {id:'panel2'})
        ]
    }
});

即使这可行，也会导致 Panel1 的所有实例共享一个 Panel2 实例。

相反，您应该在初始化时创建组件:

Ext.define('App.views.Panel1', {
    id:'panel1',
    extend:'Ext.Panel',
    config:{
        title: 'test',
        layout:'card',
        items:[
            {
                items:[
                    {
                        xtype: 'button',
                        text: 'TEST',
                        handler:function(){
                            Ext.getCmp('panel1').setActiveItem(Ext.getCmp('panel2'));
                        }
                    }
                ]
            }
        ]
    },

    initialize: function() {
        this.add(Ext.create('App.views.Panel2', {id:'panel2'}));
        this.callParent();
    }
});

initialize 方法是在每次创建组件类实例时执行任何类型的额外工作的好地方。 callParent 之所以存在，是因为我们重写了父类的 initialize ，该父类可能有一些我们想要保留的自己的逻辑。