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

Question

免责声明：我对 ExtJS（5.01 版）比较陌生。我希望能联系到一些 ExtJS 专家来为我指明正确的方向： 在指定initComponent 方法within 和items 配置时出现错误。下面的代码会产生错误：

"Uncaught TypeError: Cannot read property 'items' of undefined"

当北子面板的'initComponent'函数被注释掉时，错误消失。我觉得我错过了初始化顺序的一些东西。

问：如何在items 配置内指定子项的initComponent 方法？

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',{ 创建它，或者通过创建另一个视图将此组件添加为项目，或通过派生另一个组件 (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 有何不同，因为该功能有时也很方便）。