Extjs 5.1 将容器动态添加到面板答案

【问题标题】：Extjs 5.1 Dynamic addition of container to panelExtjs 5.1 将容器动态添加到面板
【发布时间】：2015-06-19 21:33:41
【问题描述】：

我要做的是在单击按钮时将容器动态添加到面板。

容器的第一个实例被添加并且可以在 panel.items.length 中看到

从第二个实例开始 panel.items.length 不会改变。但是可以在 dom 和屏幕上看到面板。

只是想知道为什么 panel.items.length 没有增加。是bug吗？

提琴手链接https://fiddle.sencha.com/#fiddle/p3u

检查线路：

console.log(qitems);

低于调试器；它设置为我正在谈论的 questionsblock.items.length。

【问题讨论】：

建议您阅读有关renderTo 的文档。 “如果组件要成为容器的子项，请不要使用此选项。容器的布局管理器负责呈现和管理其子项。”

标签： javascript extjs extjs5 sencha-architect

【解决方案1】：

从 QuestionTemplate 中移除 itemId 并从新实例中移除 renderTo。

您的点击处理程序应如下所示：

listeners: {
    'click': function(button) {
        var questionPanel = button.up('form').down('#questionsblock'),
            qitems = questionPanel.items.length,
            questiontemplate = Ext.create('QuestionTemplate', {
            qid: qitems,
            questiontype: 'text'
        });
        console.log(qitems);
        questionPanel.add(questiontemplate);
        questionPanel.doLayout();
    }
}

检查这个小提琴：https://fiddle.sencha.com/#fiddle/p47

【讨论】：

谢谢，您提供的解决方案确实解决了我的问题。再次感谢。