0

ContentPanels を追加する TabContainer があります。私の要件は、このTabContainer（ContentPanelsの異なるコンテンツ）を毎回リロードし、グリッドの新しい行（同じページのajaxから生成されたもの）をクリックすることです。最初に、id が既に登録されているという問題が発生したとき、こちらの回答の 1 つに示されているように、destroyRecursive を使用しました。今、それを使用した後、次の結果が得られます。

最初に行のいずれかをクリックした後の結果: コンテナーと 3 つのコンテンツ ペインを使用した方法と同じです。

いずれかの行、2 回目、およびその他の回数をクリックした後の結果: 3 つのコンテンツ ペインを持つ新しいコンテナーが、3 つのコンテンツ ペインを持つ古いコンテナーの上に配置されます。何行クリックしても、結果には常に 2 つのコンテナーがあり、新しいコンテナーは古いコンテナーの上に配置されます。

以下は、私が使用したコードです。

    <div id = "tabsContainer">
    <div id="tabPanels" data-dojo-type = "dijit/layout/TabContainer"></div>
    </div>

  function getTabPanelsForTheRow() {
        require(["dijit/layout/TabContainer",
         "dijit/layout/ContentPane"], function (TabContainer, ContentPane) {
            var tc = new TabContainer({}, "tabPanels");

            var cp1 = new ContentPane({
                title: "Contacts",
                content: "These are the activities"
            });
            tc.addChild(cp1);

            var cp2 = new ContentPane({
                title: "Activities",
                content: "These are the activities"
            });
            tc.addChild(cp2);

            var cp3 = new ContentPane({
                title: "Opportunities",
                content: "We are known for our drinks."
            });
            tc.addChild(cp3);

            tc.startup();
        });
   }

    function destroyTabPanel() {
        require(["dijit/layout/TabContainer"], function (TabContainer) {
          var tp = dijit.byId("tabPanels");
          tp.destroyRecursive(true);
    });
}

行をクリックするたびに、最初に destroyTabPanel() を呼び出し、次に getTabPanelsForTheRow() を呼び出します。

4

1 に答える 1

0

destroyRecursive()あなたの問題は、 DojoにDOMを保持するように指示している呼び出しの「真」であるように見えます。したがって、重複した ID の問題を解決したウィジェットを破棄していますが、生成された DOM は保持されます。次に、呼び出すgetTabPanelsForTheRow()と、既存のパネルの上に 3 つの新しいパネルが生成されます。

あなたがしたいことは、 を呼び出した後、 を呼び出す前にdestroyRecursive()コンテナ "tabPanel": を空にすることです。domConstruct.empty("tabPanel")getTabPanelsForTheRow()

余談ですが、行をクリックするたびにパネル ウィジェットを破棄して再インスタンス化しています。TabContainer 内に contentPanes への参照を保存してから、contentPanes のみを破棄するメソッドを記述し、TabContainer ノードを空にして、次に、新しいペインを作成します...

于 2013-07-25T17:48:43.940 に答える