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

Posted 2023-02-26

【中文标题】项目配置中的 EXTJS 内联 initComponent 方法

【英文标题】：EXTJS inline initComponent method within items config

【发布时间】：2014-09-02 04:40:05

【问题描述】：

免责声明：我对 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);
    
);

【问题讨论】：

你不能这样做！看看this question 更多关于覆盖的信息。您的问题是，函数的范围将是“MyApp.view.TestView”实例的范围。

是否有 ExtJS 方法将上下文（即从配置生成的对象）附加到函数？类似于带有作用域配置的函数包装器？

请告诉我们您为什么要在孩子上使用 initComponent 函数。大多数时候，没有必要。

【参考方案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 有何不同，因为该功能有时也很方便）。

【讨论】：

谢谢。这有帮助！出于某种原因，我假设子配置隐式包装在匿名类定义中，类似于 Ext.define() 函数的配置对象。