请多多包涵,因为我是 dojo、javascript 和一般网络编程的新手。
在我正在处理的网页的一部分中,我有一个 BorderContainer(在 TabContainer 内部,在另一个 BorderContainer 内部,但我认为这与问题无关),我想放一些里面的小部件。
我在 BorderContainer 上使用“标题”设计 - 理想情况下 - 我希望在中心区域有一个 ContentPane,在底部区域有一个 TextBox 和四个按钮(在宽度上并排排列边界容器)。
这可能是一个非常基本的想法,我通常在 BorderContainers 或小部件(甚至在 Web 编程的基本范式中)缺少它,但我无法让 TextBox 和四个按钮并排排列,因为我想。
我是否可以将不同的小部件放在同一区域,而无需仅为该区域创建另一个 BorderContainer(或其他容器或窗格)?如果是这样,我将如何实施?
以下是创建 BorderContainer 及其未来组件的一些片段。
//Main BorderContainer
this.container = new dijit.layout.BorderContainer({
title: that.name + "_CTR",
style: "height: 100%",
design: "headline"
}, that.name + "_CTR");
//Blank ContentPane in the center region
this.msgArea = new dijit.layout.ContentPane({
content: "",
region: "center"
}, that.name + "_MSGS");
//TextBox to be placed in the "bottom" region
this.textBox = new dijit.form.TextBox({
value: "",
placeHolder: "Type a message to publish",
region: "bottom"
}, that.name + "_TB");
//Example of one of my four buttons also to be placed in the "bottom" region
this.pubButton = new dijit.form.Button({
region: "bottom",
label: "Publish",
showLabel: true,
onClick: function () { that.publish(); }
}, that.name + "_PB");
//Function that adds children to the main BorderContainer and calls startup()
this.initialize = function () {
that.container.addChild(that.msgArea);
that.container.addChild(that.textBox);
that.container.addChild(that.pubButton);
that.container.addChild(that.pubButton2);
that.container.addChild(that.pubButton3);
that.container.addChild(that.pubButton4);
that.container.startup();
};
感谢您的时间!
编辑:忘了提到,如果可能的话,我宁愿以编程方式执行此操作
EDIT2:非常感谢下面的克雷格!虽然我没有使用您的确切方法,但使用 dojo.create(尚未转换为 1.7...)帮助我了解了有关 DomNodes 的更多信息(就像我说的,我是网络编程的新手:P),这让我发现不止一个小部件可以取代 ContentPane 的“内容”属性,只需将其设置为每个小部件的 domNode 引用数组!
//Create BorderContainer and Buttons as above
//Create the ContentPane for the bottom region of the BorderContainer
this.pane = new dijit.layout.ContentPane({
content: "",
region: "bottom"
}, that.name + "_BTM");
//Add each widget to the ContentPane's "content" by using a DomNodeList
//Then add the ContentPane to the BorderContainer
this.initialize = function () {
that.pane.set("content", [
that.textBox.domNode,
that.button1.domNode,
that.button2.domNode,
that.button3.domNode,
that.button4.domNode
]);
that.container.addChild(that.pane);
that.container.startup();
};
这种快速而肮脏的方法可能不是最好的标记/布局,在这种情况下,我认为您的方法和/或“innerHTML”的编辑可能会更好,但这是我目前需要的。
再次非常感谢,希望我能够投票/给予声誉....