Extjs 4.2 中自定义组件的多个实例

Question

我有一个名为 "Teilgewerke" 的网格面板。我可以将它用作

等面板的一个项目

{
    xtype:'panel',
    layout: {
        type: 'hbox',
        align: 'stretch'
    },              
    items:[
        {
            //xtype: 'teilgewerkegrid',
            id:'feinplanungPanelTeilgewerkeGrid',
            flex: 2
        },
        {
            xtype: 'panel',
            flex: 1
        }
    ]

}

但是现在当我尝试在另一个面板中使用它时，它会抛出以下错误：

Uncaught TypeError: Cannot read property 'isComponent' of undefined

我在 Whosebug 上发现了这个 question，它指向完全相同的问题。我尝试了上面 link 中给出的解决方案，方法是将项目作为

initComponent: function() {
        this.items = [
            {
                xtype:'panel',
                flex: 5,
                border: false,
                padding: '0 20 0 20',
                items:[
                    {
                        xtype: 'text',
                        text: 'Teilgewerke für Aufbau an beteiligte Gruppen senden.',
                    }
                ]               
            },


            Ext.create('PfalzkomApp.view.TeilgewerkeGrid', {
                padding: '0 20 0 20',
                id:'aufbauTabTeilgewerkeGrid',
                flex: 90            
            }),

            {
                xtype: 'panel',
                border: false,
                padding: '0 20 0 20',
                flex: 5             
            }

        ]
    this.callParent();
}

但我仍然有同样的问题。有人可以指出我的错误吗？

Answer 1

您遇到的问题应该是 Sencha ExtJS 中没有 xtype:'text' 预定义。请 select textfield、label、container 之一。

请在整个代码中严格执行正确的缩进，否则很快就会无法阅读。此外，使用最易读的组件实例化方法，如下所述：

如果你想实例化一个自定义组件，你可以像实例化一个 Sencha 组件那样做：使用 xtype.

在你定义的组件中，你给组件一个xtype名称：

Ext.define('My.custom.Component',{
    xtype:'teilgewerke'

当你创建它时，你需要组件（所以文件被加载并且 xtype 被注册到 ComponentManager），然后在你的项目定义中使用那个 xtype：

Ext.define('MyApp.view.Component',{
    extend:'Ext.panel.Panel',
    requires:['My.custom.Component'],
    initComponent: function() {
        var me = this;
        Ext.apply(me,{
            items:[{
                xtype:'teilgewerke'
            }]
        });
        me.callParent(arguments);
    }
});

请注意，您要多次实例化的所有自定义组件都不应包含任何绝对值 id；只有亲戚itemId；他们不应该使用绝对 getCmp，只能使用相对 down()、up()、nextSibling()、previousSibling().

Answer 2

我发现这个问题的解决方案是将我的自定义组件动态插入到视图的项目数组中（我想在其中添加）。

所以在我的视图的渲染后（我想在其中添加我的自定义组件），我这样做了：

var view = Ext.getCmp('aufbauTab');

    view.insert(
        view.items.length,
        {
            xtype: 'teilgewerkegrid',
            padding: '0 20 0 20',
            id:'aufbauTabTeilgewerkeGrid',
            flex: 90
        }
    );

而且效果非常好。

Extjs 4.2 中自定义组件的多个实例

Multiple Instances of Custom Component in Extjs 4.2

extjs

extjs4.2