dojo1.7 макет действующий винт

Я пытаюсь сделать простой макет с использованием dojo1.7. Довольно много, что я хочу это:dojo1.7 макет действующий винт

строка заголовка с кучей ссылок и прочего, которая охватывает всю страницу
колонтитул ряд с кучей ссылок и прочего, которая охватывает всю страницу
боковая панель слева с деревом в нем
центральной панели с некоторыми вкладками в его

я первый сделал все виджеты и получил их все отображения на той же странице. Все делалось так, как ожидалось, прежде чем я начал играть с макетом (соответствующий код включен в конце вопроса)

Во-первых, настройки области, по-видимому, в значительной степени игнорируются, заголовок находится там, где он должен быть, и нижний колонтитул прямо под ним. за ними расположены деревья и вкладки частей макета. оба они выравниваются влево. Firebug сообщает мне, что для «дерева» («tree» - это идентификатор div, в котором есть дерево) отсутствует.

HTML

<body class="claro"> 
    <div 
     id="appLayout" class="demoLayout" 
     data-dojo-type="dijit.layout.BorderContainer" 
     data-dojo-props="design: 'headline'"> 

      <div class="centerPanel" 
    data-dojo-type="dijit.layout.TabContainer" 
    data-dojo-props="region: 'center'"> 

         <div data-dojo-type="dijit.layout.ContentPane" title="blah1" selected="true"> 
         stuff 
         </div> 
         <div data-dojo-type="dijit.layout.ContentPane" title="blah2"> 
         stuff 
         </div>    
</div> 

<div  
     id="tree" 
     class="edgePanel" 
     data-dojo-type="dijit.layout.ContentPane" 
     data-dojo-props="region: 'left', splitter: true"> 
</div> 

      <div 
       class="edgePanel" 
       data-dojo-type="dijit.layout.ContentPane" 
       data-dojo-props="region: 'bottom'"> 
       footer stuffs 
      </div> 

      <div 
       class="edgePanel" 
       data-dojo-type="dijit.layout.ContentPane" 
       data-dojo-props="region: 'top'"> 
       heading stuffs 

     </div> 
    </div>  
</body>

ЯШ:

require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer", 
    "dijit/layout/ContentPane", "dojo/parser"]); 
require(["dijit/Tree"], function(Tree) { 
tree = new Tree({ // create a tree 
     model: my_model_that_works 
    }, "tree"); // target HTML element's id 
tree.startup(); 
});

Еще одна странная вещь, что я могу сделать все содержимое страницы исчезают путем изменения «дерево» Див выглядеть следующим образом:

<div  
     id="tree_container" 
     class="edgePanel" 
     data-dojo-type="dijit.layout.ContentPane" 
     data-dojo-props="region: 'left', splitter: true"> 
     <div id="tree"></div> 
</div>

источник

2012-06-28 Sheena

Был какой-то не хватает CSS. Учебники dojo на самом деле не рассказывают вам обо всех необходимых css. Я использовал firebug для просмотра css, который использовался для примеров учебников, после чего исправление проблемы было тривиальным.

источник

2012-06-29 14:29:32 Sheena

Необходимо добавить dojo/domReady! к требованию в следующем фрагменте, и я бы не заменил c ontent pane taht - это левое поле с деревом. Я бы установил содержимое левой панели содержимого с деревом.

require(["dijit/Tree", "dojo/domReady!"], function(Tree) { 
    tree = new Tree({ // create a tree 
    model: my_model_that_works 
    }); 
    dijit.byId("tree").set('content', tree); 
    tree.startup(); 
});

У меня нет модели, чтобы создать дерево, но вы видите пример со всем остальным в

http://jsfiddle.net/cswing/3AdMg/

источник

2012-06-28 17:21:36

спасибо, но это не сработало. все то же самое. дерево работает, я могу расширить элементы и все, проблема заключается в макете – Sheena

dojo1.7 макет действующий винт

ответ

Смежные вопросы