Question

在阅读了许多关于在不重新加载整个页面的情况下将新组件添加到现有容器中的示例之后，我在Viewport组件中组合树和选项卡时遇到了一个小问题。

我要做的是在click事件上注册到树节点并加载到内容容器新组件，具体取决于节点类型，它可以是tabpanel，gridpanel或任何其他可用组件。

这是树对象的简短示例：

{
    xtype: 'treepanel',
    id: 'tree-panel',
    listeners: {
        click: function(n) {

            var content = Ext.getCmp('content-panel');

            content.setTitle(n.attributes.qtip);

            //remove all components from content-panel
            content.removeAll();

            content.add(dummy_tabs2);

            content.doLayout();

            return;
        }
    }
}

所有DOM操作都很顺利，所有内容都正确注册，显示了新标题，但未显示dummy_tabs2。我确实尝试为doLayout设置各种属性（true | false，true | false）但没有任何反应。

我做错了吗？

Answer 1

现在我明白了，DOM工作正常，但EXTJS将显示隐藏属性应用于新插入的元素。那么剩下要做的是将show（）函数应用于我们的新组件。 Folowing代码如下所示：

{
  xtype: 'treepanel',
  id: 'tree-panel',
  listeners: {
    click: function(n) {

    var content = Ext.getCmp('content-panel');

    content.setTitle(n.attributes.qtip);

    //remove all components from content-panel
    content.removeAll();

    var container = content.add(dummy_tabs2);

    content.doLayout();

    container.show();

    return;
    }
}}

Answer 2

尝试在doLayout之前设置dummy_tabs2的宽度和高度。用萤火虫检查，也许面板在那里，但你看不到。

在API中读取Ext.Panel。

指定子项目时一个Panel，或动态添加面板的组件，记得考虑一下你希望专家组如何做到安排那些孩子的元素，和这些子元素是否需要使用Ext的内置之一来调整大小布局方案。默认情况下，Panels使用 ContainerLayout方案。这个只需渲染子组件，一个接一个地追加他们在容器内，并没有完全适用任何尺寸。

希望这会有所帮助。

视口上的EXT JS到布局没有显示任何内容

2 个答案: