extjs 动态地将网格添加到选项卡？答案

【问题标题】：extjs dynamically add a grid to a tab?extjs 动态地将网格添加到选项卡？
【发布时间】：2011-04-15 22:50:22
【问题描述】：

在我的 extjs 选项卡面板中，我有一个选项卡。在标签中我做了一个：

this.tab.add(this.someGrid1);

现在基于某个条件，我想做：

if (cond ==true)
this.tab.remove(this.someGrid1);
this.tab.add(this.someGrid2);

这可能吗？我试过没有删除，但它不起作用。什么都没有发生，旧的 someGrid1 仍然存在。

编辑：根据建议，我将代码更改为：

if (cond ==true)
this.tab.remove(this.someGrid1);
this.tab.add(this.someGrid2);
this.tab.doLayout();

else if (cond ==false)
this.tab.remove(this.someGrid2);
this.tab.add(this.someGrid1);
this.tab.doLayout();

当页面加载时，cond == true 一切正常。当我通过组合将 cond 更改为 false 时， someGrid1 加载正常。当我改回cond ==true时，代码不会执行超出

this.tab.add(this.someGrid2);
this.tab.doLayout();

并且 someGrid2 未呈现。错误是这样的：

Error: b.getPositionEl().dom is undefined

【问题讨论】：

标签： extjs

【解决方案1】：

在运行时动态添加和删除组件时，您必须确保 Ext 触发组件的重新渲染，以确保反映更改的状态。我实际上不知道您面板的确切结构，但假设 this.tab 是 Ext.TabPanel 您必须这样做

this.tab.doLayout();

重新渲染组件。

【讨论】：

但是当我添加 this.tab.add(this.someGrid1);第一次，怎么不需要doLayout？是自动完成的吗？
doLayout() 在组件的初始渲染时自动调用。此后每次更改组件的 HTML 表示的更改都需要显式调用 doLayout()（至少在 Ext JS 3.x 中）。

【解决方案2】：

该代码在我看来是正确的。您是否尝试过调试并验证在调用remove 方法时是否正确设置了this.someGrid1？在 Ext 中很容易弄乱您的 this 范围。

没关系，但您也可以尝试将true 作为第二个参数添加到remove。这将强制 Ext 销毁组件，并且与之关联的任何 dom 都将消失。

如果您仍然无法使其正常工作，也许可以发布一些额外的代码，但我敢打赌，如果您使用 Firebug 并调试此功能，解决方案将是显而易见的。

【讨论】：

【解决方案3】：

dom 在remove 上被销毁，所以你必须重新创建 div。这就是您收到 dom is undefined 错误消息的原因。

【讨论】：