6

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

4

2 回答 2

3

也许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();

我认为您的代码的问题是您再次重用了同一个实例。rendered一旦组件被写入 DOM 树，Ext 在内部设置一个- 标志。由于rendered在您从中删除组件后该标志仍然为真，C因此当您再次添加该组件时不会重绘该标志。

一个简单的修改将使您的代码工作：在您调用按钮处理程序之前分别添加A.rendered = false;和。B.rendered = falseC.doLayout()

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

于 2011-03-31T13:38:15.653 回答
0

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

于 2011-07-31T12:54:09.983 回答