dojo如何動態更改tabContainer中標籤的標題？

Question

如果我已到選項卡通過做道場，

mycode的創建標籤

var tab=new dijit.layout.ContentPane({ 
     title:formCount, 
     id:''+formCount, 
     content:cont, 
     class:'tab', 
     closable: true, 
     onClose:function(){ 
      return confirm('Relly want to remove?'); 
     } 
    }); 
dijit.byId('tabContainer').addChild(tab); 

後，我想通過的dijit /對話框動態改變分頁標題。 但我不知道應該如何實現，請告訴我

Answer 1

實現這一目標的最好辦法是創建自己的小部件，並從dijit/layout/ContentPane延伸，例如：

declare([ ContentPane ], { 

}); 

然後你就可以添加內容以顯示一個對話框，比如：

declare([ ContentPane ], { 
    btn: domConstruct.create("button", { 
     innerHTML: "Change title", 
    }), 
    _createButton: function() { 
     domConstruct.place(this.btn, this.domNode); 
     on(this.btn, "click", lang.hitch(this, this._showDialog)); 
    }, 
    postCreate: function() { 
     this.inherited(arguments); 
     this._createButton(); 
     this._createDialog(); 
    } 
}); 

的postCreate功能是在道場的微件的生命週期的一部分，並且被加載widget時被自動執行。因此，我們使用它來添加一個「更改標題」按鈕到內容窗格，點擊時調用一個函數this._showDialog()（這就是你可以在this._createButton()中看到的內容）。

當然，你還需要創建一個dijit/Dialog，才能在實際工作表現之一，所以你可以這樣做：

declare([ ContentPane ], { 
    /** ... */ 
    dialog: null, 
    editField: null, 
    okBtn: null, 
    _showDialog: function() { 
     this.editField.value = this.title; 
     this.dialog.show(); 
    }, 
    _createDialog: function() { 
     var div = domConstruct.create("div"); 
     domConstruct.place(div, this.domNode); 
     this.dialog = new Dialog({ 
      title: "Change title", 
      content: "" 
     }, div); 

     this.editField = domConstruct.create("input", { 
      type: "text" 
     }); 
     this.okBtn = domConstruct.create("button", { 
      innerHTML: "OK" 
     }); 
     domConstruct.place(this.editField, this.dialog.containerNode); 
     domConstruct.place(this.okBtn, this.dialog.containerNode); 
     on(this.okBtn, "click", lang.hitch(this, this._saveTitle)); 
    }, 
    /** .. */ 
}); 

這裏會發生什麼事是，我們創建一個簡單的文本框和一個對話框按鈕（OK按鈕），所有這些都可以在this._createDialog()中找到。

在this._showDialog()您可以看到我首先將文本字段的值更改爲內容窗格的標題。然後我顯示我們之前做的對話。

現在，所有你需要做的就是讀取值按下OK按鈕時：

declare([ ContentPane ], { 
    /** ... */ 
    _saveTitle: function() { 
     this.set("title", this.editField.value); 
     this.dialog.hide(); 
    }, 
    /** ... */ 
}); 

這就是你真正需要的。你可以在JSFiddle上找到一個工作示例：http://jsfiddle.net/LE49K/