Dojo：我可以将两个或更多个小部件添加到同一个BorderContainer区域吗？ [英] Dojo: Can I add two or more widgets to the same BorderContainer region?
问题描述
请与我一起承担，因为我是一般的dojo，javascript和网络编程的新功能。
在我正在开发的网页的一部分中，我有一个BorderContainer（在一个TabContainer的内部，这是另一个BorderContainer内部，但我不认为这与问题有关），我想在其中放置一些小部件。
我在BorderContainer上使用标题设计，理想情况是 - 我想要在中心区域有一个ContentPane，一个TextBox和四个按钮全部在底部区域（跨越边框容器的宽度并排排列）。
这可能是一个非常基本的想法，我错过了BorderContainers或小部件（甚至是网络编程的基本范例），但是我无法获取TextBox和四个按钮，我可以在不同的区域放置不同的小部件，而不需要创建另一个BorderContainer（或其他容器或窗格），只是为了...那个地区？如果是这样，我该如何实现？
以下是创建BorderContainer及其未来组件的一些片段。
// Main BorderContainer
this.container = new dijit.layout.BorderContainer（{
title：that.name +_CTR，
style ：height：100％，
design：headline
}，that.name +_CTR）;
//中间区域的空白ContentPane
this.msgArea = new dijit.layout.ContentPane（{
content：，
region：center
}，that.name +_MSGS）;
//将TextBox放在底部区域
this.textBox = new dijit.form.TextBox（{
value：，
placeHolder ：键入要发布的消息，
region：bottom
}，that.name +_TB）;
//我的四个按钮之一也被放置在底部区域的示例
this.pubButton = new dijit.form.Button（{
region：底部，
标签：发布，
showLabel：true，
onClick：function（）{that.publish（）;}
}，that.name +_PB ）;
//将子项添加到主要BorderContainer并调用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：非常感谢Craig下面！虽然我没有使用您的确切方法，但是玩dojo.create（尚未转换为1.7）...帮助我了解更多关于DomNodes的信息（就像我说的，我是网络编程的新功能：P）这让我想出，多个小部件可以代替ContentPane的内容属性，只需将其设置为每个小部件的domNode引用数组！
//如上所述创建BorderContainer和Buttons
//为BorderContainer的底部区域创建ContentPane
this.pane = new dijit.layout .ContentPane（{
content：，
region：bottom
}，that.name +_BTM）;
//通过使用DomNodeList
//将ContentPane的内容添加到每个窗口小部件然后将ContentPane添加到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可能会更好，但这是我现在所需要的。
非常感谢，希望能够upvote /给予信誉....
是的，您可以将多个小部件放在同一区域，但中心区域除外。请注意，添加的第一个小部件最多在该区域指定的方向。第一个顶部的小部件在顶部。第一个底部小部件在底部，依此类推。
http://jsfiddle.net/cswing/ssDXh/
看看你的例子，我建议把文本框和按钮放在自己的内容中窗格，然后将窗格放入边框容器。边框容器将根据屏幕尺寸调整区域的大小，您不希望按钮和文本框更改大小。
编辑：
有两种方法可以考虑完成注释中提到的问题。
1）您可以使用 dom-construct 手动构建html，然后使用新创建的domNode实例化一个小部件。
var b1 = new ContentPane（{}）;
var div1 = domConstruct.create（'div'，{}，b1.containerNode）;
//使用domConstruct构建更多html，像表等
var btn = new Button（{label：'My Action 1'}，
domConstruct.create（'div'，{} ，div1））;
2）您可以创建一个具有html标记的模板化小部件，然后该小部件负责实例化文本框和按钮。
dojo.declare（MyFormLayout，[dijit._Widget，dijit._Templated]，{
//在模板中放置更好的html布局
templateString：'< div>< div dojoAttachPoint =btnNode>< / div>< / div>'，
postCreate：function（）{
this.inherited（arguments）;
this.button = new Button（{label：'My Action 2'}，this.btnNode）;
}
}）;
appLayout.addChild（new ContentPane（{
region：bottom，
content：new MyFormLayout（{}）
}））;
如果标记简单，严格用于布局，第一个选项很方便。
当有其他逻辑被编码为小部件时，第二个选项工作得很好。该代码可以在自定义窗口小部件中。
Please bear with me as I am new to dojo, javascript, and web programming in general.
In a part of the web page I am working on, I have a BorderContainer (inside of a TabContainer, which is inside of another BorderContainer, but I don't think this is relevant to the issue) and I want to put a number of widgets inside it.
I am using the "headline" design on the BorderContainer and - ideally - I would like to have a ContentPane in the center region and a TextBox and four buttons all in the bottom region (lined up side-by-side across the width of the border container).
This could be a very basic idea that I am missing behind BorderContainers or widgets in general (or even in basic paradigms of web programming!), but I am having trouble getting the TextBox and four buttons to line up side-by-side as I would like.
Is it possible for me to put different widgets in the same region without creating another BorderContainer (or other Container or Pane for that matter) just for that region? If so, how would I implement this?
Here are some snippets of creating the BorderContainer and it's future components.
//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();
};
Thank you for your time!
EDIT: Forgot to mention that I would prefer doing this programmatically if possible
EDIT2: Big thanks to Craig below! While I didn't use your exact methods, playing around with dojo.create (haven't converted to 1.7 yet...) helped me learn more about DomNodes (like I said, I'm new to web programming :P), which allowed me to figure out that more than one widget could take the place of the ContentPane's "content" property simply by setting it to an array of domNode references for each widget!
//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();
};
This quick and dirty method might not be best for markup/layout, in which case I think your methods and/or editing of the "innerHTML" might work out better, but this is what I needed at the moment.
Many thanks once again, wish I was able to upvote/give reputation....
Yes you can put multiple widgets in the same region, except for the center region. Notice that the first widget added is farthest most in the direction specified by the region. The first top widget is on top. The first bottom widget is on the bottom, and so on.
http://jsfiddle.net/cswing/ssDXh/
Looking at your example, I would recommend putting the textbox and button into it's own content pane and then putting the pane into the bordercontainer. The bordercontainer will adjust the sizes of the regions based on screen size, and you don't want the button and textbox changing size.
EDIT:
There are two techniques you can consider to accomplish what was asked in the comment.
1) You can use dom-construct to manually build the html and then instantiate a widget using a newly created domNode.
var b1 = new ContentPane({});
var div1 = domConstruct.create('div', {}, b1.containerNode);
// build more html using domConstruct, like a table etc
var btn = new Button({ label: 'My Action 1'},
domConstruct.create('div', {}, div1));
2) You can create a templated widget that has the html markup and the widget is then responsible for instantiating the text box and button.
dojo.declare("MyFormLayout", [dijit._Widget, dijit._Templated], {
//put better html layout in the template
templateString: '<div><div dojoAttachPoint="btnNode"></div></div>',
postCreate: function() {
this.inherited(arguments);
this.button = new Button({ label: 'My Action 2'}, this.btnNode);
}
});
appLayout.addChild(new ContentPane({
region: "bottom",
content: new MyFormLayout({})
}));
The first option is convenient if the markup is simple and strictly for layout. The second option works well when there is other logic that is coded for the widgets. That code can go in the custom widget.
这篇关于Dojo：我可以将两个或更多个小部件添加到同一个BorderContainer区域吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
