Javascript 将自定义xtype小部件呈现到容器

我从一个promoted类创建了一个定制的xtype小部件。当我想将小部件呈现给容器时，我得到一个错误

无法读取null的属性“dom”。

cont是我的容器

var d = Ext.widget('MultiViewComponent', {
                renderTo: cont
            });

我尝试了

renderTo:cont.getLayout（）

。 我还尝试过使用

cont.add

，然后使用

cont.doLayout（）

对于“renderTo”文档状态： 如果组件是容器的子项，请不要使用此选项。容器的布局管理器负责呈现和管理其子项

使用

add

多次添加时。所有组件在屏幕上都可见，但只有一个位于

cont.items.items

（最后添加的一个）内，因此在使用

cont.removeAll（）

时，只有一个组件被删除。

我在这里错过了什么或做错了什么？请提供帮助和建议

更新：如果尝试使用

container.removeAll（）

只有一个小部件被删除。查看container.items.items时，即使添加了多个组件，也只有一个存在

 var d = Ext.widget('MultiViewComponent', {
            });

            cont.add(d);
            cont.doLayout();

//later 

cont.removeAll();

多视图组件

Ext.define('myApp.view.MultiViewComponent', {
    extend: 'Ext.container.Container',
    alias: 'widget.MultiViewComponent',

    requires: [
        'Ext.form.Label',
        'Ext.grid.Panel',
        'Ext.grid.View',
        'Ext.grid.column.Date',
        'Ext.grid.column.Number'
    ],

    height: 204,
    itemId: 'multiViewComponent',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [
                {
                    xtype: 'label',
                    itemId: 'multiViewLabel',
                    text: 'My Label'
                },
                {
                    xtype: 'gridpanel',
                    itemId: 'multiViewGrid',
                    width: 498,
                    title: 'My Grid Panel',
                    store: 'Document',
                    columns: [
                        {
                            xtype: 'datecolumn',
                            dataIndex: 'dateCreated',
                            text: 'DateCreated'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'documentType',
                            text: 'DocumentType'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'description',
                            text: 'Description'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'name',
                            text: 'Name'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'creator',
                            text: 'Creator'
                        },
                        {
                            xtype: 'numbercolumn',
                            dataIndex: 'fileId',
                            text: 'FileId'
                        },
                        {
                            xtype: 'numbercolumn',
                            dataIndex: 'metaFileId',
                            text: 'MetaFileId'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'uid',
                            text: 'Uid'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});

---

cont.items

是一个

Ext.util.MixedCollection

，而不是一个数组。底层数组位于

cont.items.items

。不管怎样，你不想碰它。使用

Ext.container.container#remove

删除子组件

你的报价说明了一切。。。容器用它们的组件做很多事情，最显著的是渲染、布局和组件查询连接。您不能仅仅更改它们的DOM元素或javascript成员变量，然后期望它们工作。他们必须知道自己的状态何时发生变化才能做出相应的反应，这就是为什么您应该始终使用记录在案的公共方法来操纵它们。让他们知道发生了什么，并给他们行动的机会

更新

根据您的反馈，很明显您正在用代码做一些古怪的事情。不能说，因为你还没有发布它。。。但这里有一个完整的工作示例，说明您想要做什么。对照它检查您自己的代码

Ext.define('My.Component', {
    extend: 'Ext.Component'

    ,alias: 'widget.mycmp'

    ,html: "<p>Lorem ipsum dolor sit amet et cetera...</p>"

    ,initComponent: function() {
        if (this.name) {
            this.html = '<h1>' + this.name + '</h1>' + this.html;
        }
        this.callParent();
    }
});

在创建后动态添加子项：

// Notice that layout is updated automatically
var first = ct.add({
    xtype: 'mycmp'
    ,name: 'First dynamic'
});

// Possible alternative:
var firstAlt = Ext.widget('mycmp', {
    name: 'First dynamic (alternative)'
});
ct.add(firstAlt);

等等

var second = ct.add({
    xtype: 'mycmp'
    ,name: 'Second dynamic'
});

通过引用删除给定子级：

ct.remove(first);

按索引删除组件：

ct.remove(ct.items.getAt(1));

卸下所有组件：

ct.removeAll();

更新2

---

您的错误是

itemId

。一个容器不能有两个项目具有相同的

itemId

我不知道你的应用程序的架构，但我认为你可以尝试在某个容器的事件触发时（例如在渲染之前）显示小部件。

这令人费解。你能展示给你这个结果的完整代码吗？如果你不展示你的代码，我就不能告诉你它出了什么问题。所以请向我学习；）我已经添加了mutliviewcomponnent我不确定我是否理解您在您添加更新之前我的答案已经发布。对不起，您能显示多视图组件的代码吗？您没有在

MultiViewComponent

中定义itemId吗？我已经添加了MutliViewComponent

ct.removeAll();