2014-09-24 2 views
0

У меня есть пользовательский виджет dojo с использованием шаблона с пограничным контейнером и областями содержимого с верхними, ведущими, центральными, конечными и нижними областями. Проблема заключается в том, что стекла контента отображения сверху вниз, а не в правильном формате макета:Пограничные области контейнеров не отображаются правильно в пользовательском виджете

вот мой шаблон:

<div> 
<div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%"> 
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Top pane</div> 
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'leading'">Leading pane</div> 
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">Center pane</div> 
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'trailing'">Trailing pane</div> 
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">Bottom pane</div> 
</div> 
</div> 

здесь мой виджет:

define([ 
    "dojo/_base/declare", 
    "dijit/_WidgetBase", 
    "dijit/_TemplatedMixin", 
    "dijit/_WidgetsInTemplateMixin", 
    "dojo/text!Templates/LandUse.htm", 
    "dijit/registry", 
    "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane", 
], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, LandUseTpl, registry) { 
    return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], { 
     templateString: LandUseTpl 
    }); 
}); 

Главная страница, на которой вызывается и вставлен шаблон:

<script> 
... 
LU = new LandUse({}, "tool"); 
... 
</script> 
<body class="claro"> 
    <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 id="tool"></div> <!--here is the insertion point--> 
    </div> 
</div> 
</body> 

Любые мысли, почему этот вопрос лежит как:

верхней панели

Leading панель Панель

Центр

Продольный панель

Нижняя панель

Благодаря

ответ

0

Это потому, что dijit/_WidgetsInTemplateMixin не поддерживает макет Widge ц, как BorderContainer:

dijit._WidgetsInTemplateMixin Mixin не поддерживает добавление компоновки виджетов, как дети. В частности, есть проблемы с вызовами startup() и resize() для детей.

По какой-то причине, это вызывает ошибку в вашей консоли, говоря, что зарегистрированный BorderContainer, который вы хотите зарегистрировать. И поскольку виджет не отображается должным образом, он показывает простой HTML вместо этого, и это результат, который вы можете увидеть.

Правильное решение - не использовать макеты виджетов в вашем шаблоне, но то, что также, похоже, работает, - это использовать ваши виджеты декларативно. Например: http://jsfiddle.net/8vdu1u72/

+0

ОК, спасибо. Интересно, получится ли это. Это обязательно пригодится! – pvitt