视口上的 EXT JS toLayout 不显示任何内容

发布于 2024-08-09 05:42:36 字数 727 浏览 4 评论 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) 设置各种属性，但没有任何反应。

我做错了什么吗？

原文

After reading many example about adding new components in to existing container without reloading whole page I run in to small problem while combining tree and tabs inside Viewport component.

What I'm trying to do is to register on click event to tree node and load in to content container new component, depending on node type it can be tabpanel, gridpanel or any other available component.

here is short example of tree object:

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

All DOM manipulation went fine, everything registered properly, new Title shown, but dummy_tabs2 are not shown. I did try to set various properties for doLayout(true|false, true|false) but nothing happens.

Am I doing something wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

伪心 2024-08-16 05:42:36

现在我明白了，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;
    }
}}

Now I get it, DOM works fine but EXTJS applying display hidden property to newly inserted elements. So what is left to do is to apply show() function to our new component. Folowing code would look like this:

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

回复收藏 0 原文

傲性难收 2024-08-16 05:42:36

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

请阅读 API 中的 Ext.Panel。

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

希望这会有所帮助。