EXT JS toLayout视口犯规说明了什么

Question

阅读有关添加新的组件，以现有的容器无需重新加载整个页面我运行小的问题，同时结合树和标签视口组件内部大量的实例后。

我想要做的就是在单击事件注册树节点，并加载到内容容器新的组件，这取决于节点类型也可以是一个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（）函数应用到我们的新组件。下面的代码看起来像这样：

{ 
    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的宽度和高度。 检查萤火虫，也许面板在那里，但你看不到。

阅读Ext.Panel在API。

当任一指定的 子项的面板，或者动态地添加 组件添加到面板，请记住 考虑如何希望该小组 安排这些子元素和 这些子元素是否需要 使用Ext的内置 布局方案之一进行尺寸调整。默认情况下，面板使用ContainerLayout方案 。这 只是呈现的子组件， 追加他们的集装箱内的其他 后一个，并且不 适用任何大小的。

希望这会有所帮助。