javascript - 将自定义 xtype 小部件渲染到容器

Question

我从提升的类创建了一个自定义 xtype 小部件。当我想要将小部件渲染到容器时，我收到错误Cannot read property 'dom' of null.

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();

多 View 组件

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);
    }

});

Answer 1

cont.items 是一个 Ext.util.MixedCollection，而不是数组。底层数组位于 cont.items.items。无论如何，你不想碰它。之后使用 Ext.container.Container#remove 删除您的子组件。

您的文档引用说明了一切...容器使用其组件执行很多操作，最显着的是渲染、布局和 ComponentQuery 连接。您不能只更改它们的 DOM 元素或 javascript 成员变量并期望它们起作用。他们必须意识到他们的状态何时发生变化才能做出相应的 react ，这就是为什么您应该始终使用记录的公共(public)方法来操纵它们。让他们知道发生了什么事，并给他们采取行动的机会。

更新

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

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();
    }
});

渲染一个具有两个初始子级的容器:

var ct = Ext.widget('container', {
    renderTo: Ext.getBody()
    ,items: [{
        xtype: 'mycmp'
        ,name: 'First static'
    },{
        xtype: 'mycmp'
        ,name: 'Second static'
    }]
});

创建后动态添加子项:

// 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 的两个项目。