如何使用添加方法 Extjs 组件到另一个 Extjs 组件（moderntoolkit）

Posted 2023-02-26

【中文标题】如何使用添加方法 Extjs 组件到另一个 Extjs 组件（moderntoolkit）

【英文标题】：How use add method Extjs component to another Extjs component (moderntoolkit)

【发布时间】：2018-12-21 13:53:23

【问题描述】：

如何将组件添加到其他组件，例如 Ext.Viewport.add 方法？ 例如，我已经定义了面板，并且想使用函数添加一些组件（面板）。我使用 6.2.0，现代工具包。 这个例子没有取得积极的结果：

    Ext.onReady(function()
var bigPannel=Ext.create('Ext.Panel', 
            title: 'Ext JS 4',
            width: 300,
            height: 200,
            id : 'bigPannel',
            renderTo: Ext.getBody()
        );
    Ext.getCmp('bigPannel').add(
            title: 'panel2',
            width: 100,
            height: 100,
            html:'Hello!'
    );
)

请帮助我理解，如何将组件添加到其他组件。

【问题讨论】：

你能提供一个小提琴吗？我问是因为当您的代码显示时，当放入 fiddle.sencha.com 并使用现代工具包时，没有显示任何内容。

【参考方案1】：

我认为您不需要使用 ext.getCmp 获取 bigPannel。而是直接获取 var 并像这样添加到它：

    Ext.onReady(function () 
        var bigPannel = Ext.create('Ext.Panel', 
            title: 'Ext JS 4',
            width: 300,
            height: 200,
            id: 'bigPannel',
            renderTo: Ext.getBody()
        );

        bigPannel.add(
            title: 'panel2',
            width: 100,
            height: 100
        )
    );

【讨论】：

谢谢，但它没有奏效。我必须使用 ext.getCmp，因为我希望将“panel2”添加到上面定义的面板中。 IdOfDefinedObject.add('panel2') 不起作用：Uncaught TypeError: Cannot read property 'add' of undefined

@Tyomik_mnemonic，这确实有效，因为 bigPannel 已经是一个 Ext JS 对象并且 bigPannel.add() 将按预期工作。最好使用这种方法而不是使用 Ext.getCmp()。 Ext.getCmp() 使用 id，在您上面的代码中，您可能与 var 和 id 发生冲突...