Question

我有一个名为＆＃34; Teilgewerke＆＃34;的网格面板。我可以将它用作像

这样的面板的项目

{
    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

我在Stackoverflow上发现了这个question，这指向完全相同的问题。我通过将项目作为

尝试了上面链接中给出的解决方案

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'。请选择textfield，label，container。

之一

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

如果要实例化自定义组件，可以像实例化Sencha组件一样：使用xtype。

在您定义的组件中，为组件指定xtype名称：

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

当你创建它时，你需要组件（所以加载文件并使用ComponentManager注册xtype），然后在项目定义中使用那个非常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中自定义组件的多个实例

2 个答案: