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

Question

概念： 考虑有两个面板 A和B，以及一个窗口 C，如下所示以下示例。窗口上的按钮在两个面板之间切换。

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与其他布局/组件时可能会出现不同的情况 - 但必须有一个通用且正确的方法来做到这一点:)

Answer 1

也许 card 布局正是您所需要的：

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 就会在内部设置一个 rendered 标志。由于从 C 中删除组件后，rendered 标志仍然为 true，因此当您再次添加组件时，不会重新绘制。

简单的修改即可使您的代码正常工作：在调用 C.doLayout( 之前分别添加 A.rendered = false; 和 B.rendered = false ) 在按钮处理程序中。

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

Answer 2

我找到了一个简单的解决方案，但它更像是一个黑客。删除组件（您的 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 进行测试。