Question

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

我创建a sample JSFiddle来说明问题。单击“测试”按钮以查看此故障的示例。

Answer 1

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

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

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

1 个答案: