Dojo布局（重点主面板调用新页面）

　　之前dojo布局简单的达到iframe的效果是很容易的，但是在主显示面板调用另一页面时遇到问题，现简单介绍下：

　　先贴出布局代码吧

 1 <body class="claro">
 2     <div dojoType="dijit.layout.BorderContainer" design="headline" gutters="true" liveSplitters="true" id="borderContainer" style="width: 100%; height: 100%;"> 
 3         <div dojoType="dijit.layout.ContentPane" splitter="false" region="top" style="height:100px"> 
 4              Top
 5          </div> 
 6         <div dojoType="dijit.layout.ContentPane" splitter="true" region="leading"style="width:230px;height:auto"> 
 7             <div dojoType="dojox.layout.ScrollPane" style="float:left; padding-right:12px;width:auto;height:480px;"orientation="vertical" id="vert"> 
 8                 <div dojoType="dijit.TitlePane" title="权限管理" style="width:200px;height:100%;">
 9                     <!-- 菜单栏，自动加载 -->
10                     <div id="menuTree"></div>
11                 </div>
12             </div> 
13          </div> 
14          <div dojoType="dojox.layout.ContentPane" splitter="true" region="center" style="width:100%; height:200px;">
15              <div id="lhtabs" dojoType="dijit.layout.TabContainer" style="margin-top:-10px;">
16                 <div dojoType="dojox.layout.ContentPane" id="test1" data-dojo-props='title:"首页", closable:true'></div>    
17             </div>
18         </div> 
19     </div>
20 </body>

整体布局是用dijit.layout.BorderContainer控制的   BorderContainer能轻易的达到iframe那种上下左右中的布局，这个资料很多，不详说；

菜单栏是用dojox.layout.ScrollPane来实现的，它下面可以有多个dijit.TitlePane，然后还有一些动画效果，下章细说；

最后就是主面板了：dojox.layout.ContentPane；为什么要用dojox.layout.ContentPane啦，而不用dijit.layout.ContentPane？

　　这就是面板加载新页面的问题了，如果用dijit.layout.ContentPane，那么加载新页面时是不会加载页面的<script></script>中的代码的（在无js的静态页面中使用方便），而dojox.layout.ContentPane是在dijit.layout.ContentPane的基础上的扩展类，且能加载新页面中的js代码；

然后这里要注意的重要的一点是：dojo加载新页面是采用的ajax模式，即将新页面中的代码融合到主页面中，所以千万千万不要在新页面中再次加载dojo.js和djConfig="isDebug:true";

加载方式：获取ContentPane控件，然后set路径url；

dojo.ready(function(){
            var test1 = dijit.byId("test1");
            test1.set("href","test.html");
            
            loadMeun("meunTreeDate.json");     //加载菜单
        });

上面就是加载的一个test页面，如果是正式项目时可以设置为首页地址；

在菜单调用页面的时候，加载的页面也是可以做成可配动态的；

最后看下截图效果：

 

好了  面板布局暂时就说这么点吧；

posted @ 2012-05-15 11:36  爱吃猫的鱼~  阅读(2035)  评论(0)  编辑  收藏  举报