javascript - 项目配置中的 EXTJS 内联 initComponent 方法

Question

免责声明:我对 ExtJS(版本 5.01)比较陌生。我希望能联系到一些 ExtJS 专家来为我指明正确的方向:在 items 配置内指定 initComponent 方法时，我收到错误。下面的代码生成错误:

“未捕获类型错误:无法读取未定义的属性“项目””

当北子面板的'initComponent'函数被注释掉时，错误消失。我感觉我错过了初始化顺序的某些内容。

问:如何在 items 配置中指定子项目的 initComponent 方法？/p>

Ext.define('MyApp.view.TestView', {
 extend: 'Ext.panel.Panel',
 title: 'Parent',
 height: 300,
 layout: 'border',

 items: [{
 xtype: 'panel',
 region: 'north',
 title: 'North Child',

 /* Problematic function: If commented, it works */
 initComponent: function(){
 console.log("test north child");
 this.callParent(arguments);
 }
 }],


 initComponent: function(){

 console.log("Test parent");
 this.callParent(arguments);
 }
});

Answer 1

简短回答:您无法在子级上定义 initComponent，因为您无法在子级上执行任何其他地方无法执行的操作。

InitComponent 在创建组件“MyApp.view.TestView”的实例时执行(您仅在此处使用Ext.define 定义了它)。它可以使用 Ext.create('MyApp.view.TestView',{) 创建，或者通过创建另一个将此组件添加为项目的 View ，或者通过派生另一个组件 (extend :'MyApp.view.TestView').

所有子组件也会在创建 'MyApp.view.TestView' 时创建，因此子组件上的 initComponent 函数是多余的，因为没有父组件就无法创建子组件，因此父组件的 initComponent 可以是用于您想要在子组件的 initComponent 中执行的所有操作。

如果你需要某事。要在添加项目之前进行计算，您将按以下步骤操作:

Ext.define('MyApp.view.TestView', {
    extend: 'Ext.panel.Panel',
    title: 'Parent',
    height: 300,
    layout: 'border',

    initComponent: function(){
        var me = this,
            tf = Ext.getCmp("someTextField"),
            myTitle = (tf?tf.getValue():'');
        Ext.applyIf(me,{
            items: [{
                xtype: 'panel',
                region: 'north',
                title: myTitle,
            }]
        });
        this.callParent(arguments);
    }
});

请参阅文档 Ext.applyIf 到底做了什么(以及它与 Ext.apply 有何不同，因为该函数有时也很方便)。