6

コンセプト: 次の例のように、2 つのパネル AとB、およびウィンドウ Cがあるとします。ウィンドウ上のボタンは、2 つのパネルを切り替えます。

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

コードの問題は、同じインスタンスを再利用していることだと思います。Ext はrendered、コンポーネントが DOM ツリーに書き込まれると、そのコンポーネントに -flag を内部的に設定します。コンポーネントを削除した後もrenderedフラグは true のままであるCため、コンポーネントを再度追加しても再描画されません。

簡単な変更でコードが機能するようになります。ボタン ハンドラを呼び出す前にA.rendered = false;と をそれぞれ追加します。B.rendered = falseC.doLayout()

それでも、カード レイアウトのアプローチがベスト プラクティスです。

于 2011-03-31T13:38:15.653 に答える
0

簡単な解決策を見つけましたが、それはハックのようなものです。コンポーネント (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 に答える