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，其中可能有一些我们想要保留的逻辑。