以编程方式在内容窗格中添加边框容器和其他窗口小部件

时间:2014-08-25 15:28:25

标签: javascript dojo dijit.layout

我尝试以编程方式在中心区域内容窗格中添加具有中心和右侧区域的边框容器,但中间和右侧区域重叠 - 内容窗格似乎不会被识别为区域。这是代码:

添加边框容器和内容窗格的javascript模块:

     define(["dojo/dom-construct", "dijit/registry", "dijit/layout/BorderContainer",       "dijit/layout/ContentPane", "dojo/domReady!"],
   function (domConstruct, registry, BorderContainer, ContentPane
     ) {
    return {
        Test: function () {

           ...

            //border container
            var mainContainer = new BorderContainer({
                id: 'mainContainer',
                design: 'headline',
                style: "height: 500px; width: 800px;"
            });
            //center content pane -- > gets overwritten by the right content pane
            var cp1 = new ContentPane({
                id: 'centerContainer',
                region: "center",
                content: "I'm in the center"
            });
            //right content pane
            var cp2 = new ContentPane({
                id: 'rContainer',
                region: "right",
                content: " I'm on the right",
                style: "width: 100px"
            });
            mainContainer.addChild(cp1);
            mainContainer.addChild(cp2);
            mainContainer.placeAt('Content');
            mainContainer.startup();
        }
    }
});

这是将边框容器和其他内容窗格添加到的中心内容窗格:

 <div data-dojo-type="dijit/layout/BorderContainer" id="Main" style="width: 100%; height: 100%">
 <div data-dojo-type="dojox/layout/ContentPane" id="TOC" data-dojo-props="splitter: true, region:'leading'">
 </div>
 <div data-dojo-type="dojox/layout/ContentPane" id="Content" data-dojo-props="splitter: true, region:'center'">
 </div> 

2 个答案:

答案 0 :(得分:0)

我刚补充说:

  mainContainer.resize();

之后:

  mainContainer.startup();

现在可以正确显示

答案 1 :(得分:0)

从第一个代码块判断,看起来你的问题是你在BorderContainer附加到文档之前调用startup()。

但是,我不明白你的示例代码(第一个代码片段和第二个代码片段之间的关系),你是在尝试以声明方式(标记)还是以编程方式执行此操作?