添加到TabContainer的對話框programmaticaly

Question

我試圖產生TabContainer的，並把它添加到對話的dijit programmaticaly：

gridsDiv = domConstruct.create('div'); 
gridsDiv_inner = domConstruct.create('div', { id: 'gridsDiv_innerId', style: "width: 600px; height: 600px" }); 

var tc = new TabContainer({ 
    style: "height: 100%; width: 100%;" 
}, "gridsDiv_innerId" 
); 

var cp1 = new ContentPane({ 
    title: "Food", 
    content: "We offer amazing food" 
}); 

tc.addChild(cp1); 

var cp2 = new ContentPane({ 
    title: "Drinks", 
    content: "We are known for our drinks." 
}); 

tc.addChild(cp2); 
tc.startup(); 
gridsDiv.appendChild(gridsDiv_inner); 

dialogWindow = new Dialog({ 
    title: 'Attribute data', 
    content: gridsDiv, 
    'class': 'nonModal', 
    style: "width: 600px" 
}); 

上面的代碼返回一個空對話框。我需要通過this example中的標記實現相同的功能，但我需要動態生成製表符及其內容。

Answer 1

對於dojo對話框，內容只能是文字。沒有其他的。如果使用href，url必須返回文本作爲響應。這是規則。 這裏，tab容器對象 - tc是一個DOM節點，不能在Dialog內部使用其內容屬性設置。相反，選項卡容器需要以編程方式附加到對話框。

var tc = new dijit.layout.TabContainer({ 
    style: "height: 100%; width: 100%;" 
}); 
var cp1 = new ContentPane({ 
    title: "Food", 
    content: "We offer amazing food" 
}); 

tc.addChild(cp1); 

var cp2 = new ContentPane({ 
    title: "Drinks", 
    content: "We are known for our drinks." 
}); 

tc.addChild(cp2); 

var d = new dijit.Dialog({style: "height: 50%; width: 60%;"}); 
d.addChild(tc); 
d.show(); 

「addChild」方法是將DOM對象追加到對話框的containerNode（contentPane）。這必須用於編程目的。 （同樣，我們有'removeChild'方法viceversa）。