如何在關閉標籤時關注前一個標籤而不是第一個標籤時如何更改dojo內容標籤焦點？

Question

我使用Dojo的Dijit Layout生成與DijitTheme Tester Demo類似的內容選項卡窗格。這裏的所有選項卡都是可以關閉的。

問題是：當我關閉一個選項卡時，它將返回列表中的第一個選項卡，而不是先前的選項卡（可用於其旁邊）。

你可以認爲它像打開Firefox或者Chrome的一個新標籤，並嘗試關閉最後一個標籤....在關閉標籤，它改變了焦點到上一個標籤這是使用標籤可預測的行爲。但dijit.TabContainer，默認情況下，它會返回到第一個選項卡，而不是以前的選項卡。當您考慮UI基礎知識時，這是一個嚴重的缺陷。

我與dojo文檔檢查，但沒有發現任何暗示這一點。任何想法如何？

Answer 1

確定這樣當dijit.layout.ContentPane（標籤）上的[X]按鈕被點擊的事件OnClose中產生，所述dijit.layout.TabContainer正在監聽該事件，因此，當發生這種情況，它執行回調closeChild（）然後功能removeChild（）被執行，這最後一個是你應該重寫的。

tabContainer從繼承這兩個函數dijit.layout.StackContainer您應該檢查API文檔。

因此，對於能夠修改關閉的選項卡的默認行爲，則應該重寫默認功能，在下面的例子中我做到這一點。閱讀註釋以獲取有關添加邏輯的信息。

E.g.

<script> 
    require([ 
     "dojo/parser", 

     "dojo/_base/lang", //this is the one that has the extend function 
     "dojo/topic", //this is needed inside the overrided function 

     "dijit/layout/TabContainer", 
     "dijit/layout/ContentPane", 

     "dojo/domReady!" 
    ], function(Parser, lang, topic, tabContainer, contentPane){ 
     Parser.parse(); 

     // this will extend the tabContainer class and we will override the method in question 
     lang.extend(tabContainer, { 

      // this function, i copied it from the dijit.layout.StackContainer class 
      removeChild: function(/*dijit._Widget*/ page){ 

       // for this to work i had to add as first argument the string "startup" 
       this.inherited("startup", arguments); 

       if(this._started){ 
        // also had to call the dojo.topic class in the require statement 
        topic.publish(this.id + "-removeChild", page); 
       } 

       if(this._descendantsBeingDestroyed){ return; } 

       if(this.selectedChildWidget === page){ 
        this.selectedChildWidget = undefined; 
        if(this._started){ 
         var children = this.getChildren(); 
         if(children.length){ 

          // this is what you want to add your logic 
          // the var children (array) contains a list of all the tabs 
          // the index selects the tab starting from left to right 
          // left most being the 0 index 

          this.selectChild(children[0]); 
         } 
        } 
       } 

       if(this._started){ 
        this.layout(); 
       } 
      } 
     }); 

     // now you can use your modified tabContainer WALAAAAAAA! 
     // from here on, normal programmatic tab creation 
     var tc = new tabContainer({ 
      style: "height: 100%; width: 100%;", 
     }, "tab-container-div-id"); 

     var cp1 = new contentPane({ 
      title: "First Tab", 
      closable: true 
     }); 
     tc.addChild(cp1); 

     var cp2 = new contentPane({ 
      title: "Second Tab", 
      closable: true 
     }); 
     tc.addChild(cp2); 

     var cp3 = new contentPane({ 
      title: "Third Tab", 
      selected: true, 
      closable: true 
     }); 
     tc.addChild(cp3); 

     tc.startup(); 
    }); 
</script> 

Answer 2

在道場1.10，恢復到先前標籤是TabContainers正常行爲（而不是恢復到所述第一標籤）。

想必，你可以使用dojo/aspect得到舊的行爲（警告：未測試）：

require([ 'dijit/registry', 'dojo/aspect', 'dojo/_base/lang' ], 
    function(registry, aspect, lang) 
    { 
     var tabContainer = registry.byId('tab_container'); 
     aspect.before(tabContainer, 'removeChild', lang.hitch(tabContainer, function(page) 
     { 
      if(this.selectedChildWidget === page) 
      { 
       this.selectedChildWidget = undefined; 
       if(this._started) 
       { 
        var children = this.getChildren(); 
        this.selectChild(children[0]); 
       } 
      } 

      return page; 
     })); 
    } 
); 

，或者，你可以使用onClose擴展點上一個選項卡的ContentPane：

require([ 'dijit/registry', 'dojo/_base/lang' ], 
    function(registry, lang) { 
     newTabPane.onClose = lang.hitch(this, function() { 
      // select first 
      var tabContainer = registry.byId('tab_container'), 
       all_tabs = tabContainer.getChildren(); 
      tabContainer.selectChild(all_tabs[0]); 

      // allow save to go ahead 
      return true; 
     }); 
    } 
); 

顯然，這兩種方法可以讓您選擇一個選項卡上的特定不同的窗格，而不是被關閉了一些調整...