Extjs：如何处理这个概念：添加、删除、添加实例

概念： 考虑以下两个面板：代码> > <代码> >代码> b>代码>，窗口如下：代码>代码>代码>。窗口上的按钮在两个面板之间切换

var A = new Ext.Panel({
    title: 'A'
});

var B = new Ext.Panel({
    title: 'B'
});

var C = new Ext.Window({
    layout: 'fit',
    width: 300,
    height: 300,
    items: A,
    buttons: [
    {
        text: 'Switch to A',
        handler: function() {
            C.removeAll(false);
            C.add(A);
            C.doLayout();
        }
    }, {
        text: 'Switch to B',
        handler: function() {
            C.removeAll(false);
            C.add(B);
            C.doLayout();
        }
    }]
});
C.show();

这个概念非常简单：添加一个组件，删除它，然后再次添加相同的实例

问题： 从A到B的切换有效，但返回A则无效（B保持不变，A不再显示）

问题：考虑OOP，我希望上述概念能起作用。既然情况并非如此，而且这是一项非常基本的工作，当我尝试这样做时，我应该如何思考/思考/设计？

---

我知道在考虑FormPanel与其他布局/组件时，可能会有不同的情况，但必须有一种通用且正确的方法来做到这一点：）

也许

卡

布局正是您所需要的：

var C = new Ext.Window({
    layout: 'card',
    width: 300,
    height: 300,
    activeItem: 0,
    items: [A, B],
    buttons: [{
        text: 'Switch to A',
        handler: function() {
            C.getLayout().setActiveItem(0);
        }
    }, {
        text: 'Switch to B',
        handler: function() {
            C.getLayout().setActiveItem(1);
        }
    }]
});
C.show();

我假设您的代码的问题是再次重用同一个实例。在组件写入DOM树后，Ext会在组件上内部设置一个

呈现的

-标志。由于从

C

中删除组件后，

rendered

标志仍然为真，因此再次添加组件时不会重新绘制该标志

一个简单的修改将使代码正常工作：add

A.rendered=falseC.doLayout（）

之前，分别执行code>和

B.rendered=false

。

---

但卡片布局方法仍然是最佳实践

我找到了一个简单的解决方案，但它更像是一个黑客。移除组件（A或B面板）后，必须将其添加到另一个容器中，该容器必须才能渲染。以下是将面板移动到隐藏容器的示例：

var A = new Ext.Panel({
    title: 'A'
});

var B = new Ext.Panel({
    title: 'B'
});

var C = new Ext.Window({
    layout: 'fit',
    width: 300,
    height: 300,
    items: A,
    buttons: [
    {
        text: 'Switch to A',
        handler: function() {
            C.remove(B, false);
            T.add(B);
            C.add(A);
            C.doLayout();
        }
    }, {
        text: 'Switch to B',
        handler: function() {
            C.remove(A, false);
            T.add(A);
            C.add(B);
            C.doLayout();
        }
    }]
});

var T = new Ext.Container({
    renderTo: "temporaryContainer",
    renderHidden: true
});

C.show();

在页面正文的某个地方，您需要有：

<div id="temporaryContainer" class="x-hidden"></div>

---

使用ExtJs 4.0.2a进行测试。

@Stefan:这在视觉上可能会解决面板问题，但我考虑的是更一般的问题。有一组表单控件，在一种情况下显示它们的一个子集，在另一种情况下显示另一个子集，同时始终保持组件的初始实例，怎么样。这有什么意义吗？我希望维护一组有限的控件，而不是在需要时实例化一个新控件。从概念上讲，与选项卡面板的方式相同，但上面没有选项卡。但为什么这会干扰

卡的布局？如果您不喜欢数字赋值，也可以使用
id
s或
itemId
s来寻址
activeItem
或要激活的项。这不会造成干扰。
卡
的布局根本不是我想要的。我不能同时显示两个项目。我在OP中的例子是我能想到的最简单的例子。我希望能够拥有一组组件并同时显示一个或多个组件，并且当用户执行某些操作时，我希望能够显示/隐藏/更改组件在我的集合中的外观顺序。
X.rendered=false
-这不会以一种不方便的方式干扰组件的状态，这再次要求我维护其他属性吗？X.rendered=false

肯定会使组件处于脏状态，从而导致可能非常棘手的问题。您不应该在代码中使用这些内容。这只是为了证明问题到底是什么。好吧，现在我明白你的问题了。但是我不认为这些组件是为这个需求而设计的，因为它们将逻辑组件耦合到其呈现的DOM树中。另一个选项是隐藏所有组件，只将当前需要的组件切换为可见。