0

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

我要做的是在单击事件上注册树节点并加载到内容容器新组件中，具体取决于节点类型，它可以是 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) 设置各种属性，但没有任何反应。

难道我做错了什么？

4

2 回答 2

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;
    }
}}
于 2009-10-28T15:26:10.320 回答
0

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

阅读API中的 Ext.Panel 。

当指定 Panel 的子项或动态添加组件到 Panel 时，请记住考虑您希望 Panel 如何排列这些子元素，以及是否需要使用 Ext 的内置布局方案之一来调整这些子元素的大小。默认情况下，面板使用 ContainerLayout 方案。这只是渲染子组件，将它们一个接一个地附加到容器中，并且根本不应用任何大小。

希望这会有所帮助。

于 2009-10-27T12:57:13.260 回答