沉睡森林@漂在北京

本处文章除注明“转载”外均为原创,转载请注明出处。

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  152 随笔 :: 4 文章 :: 114 评论 :: 0 Trackbacks
 

       最近研究了下ext,其漂亮的UI十分吸引人。但是在制作tree控件的时候,利用JSON处理不是特别方便。因为大部分的应用的菜单都是配置在XML格式的文件中。于是,我写了一个XML文件,利用DOM4J解析XML文件,生成JSON字符串到前台。特殊的一点是,这个布局左边是一个accordion布局,于是利用XML文件中的sub-menu进行了配置。具体的XML格式如下:

      

<?xml version="1.0" encoding="UTF-8"?>

<menu-config>

      
<sub-menu id="subMenu1" text="用户管理">

           
<tree id="990011" text="人员管理" href="#" leaf="true" />

           
<tree id="990021" text="单位管理" href="#" leaf="true" />

           
<tree id="990031" text="行政代码管理" href="#" leaf="true" />

           
<tree id="990041" text="用户管理" href="#" leaf="true" />

           
<tree id="990051" text="权限功能管理" href="#" leaf="true" />

      
</sub-menu>

      
<sub-menu id="subMenu2" text="采伐证管理">

           
<tree id="990011" text="人员管理" href="#" leaf="true" />

           
<tree id="990021" text="单位管理" href="#" leaf="true" />

           
<tree id="990031" text="行政代码管理" href="#" leaf="true" />

           
<tree id="990041" text="用户管理" href="#" leaf="true" />

           
<tree id="990051" text="权限功能管理" href="#" leaf="true" />

      
</sub-menu>

</menu-config>

       最终页面效果如下示:

       代码比较多,不能全部贴出来,最核心的JS贴出来看看。

Ext.onReady(function() {

      Ext.state.Manager.setProvider(
new Ext.state.CookieProvider());

      Ext.Ajax.request(
{

           url : 
"txn900002.do",

           method : 
"get",

           success : 
function(response, options) {

                 
var array = Ext.util.JSON.decode(response.responseText);

                 
for (var i = 0; i < array.length; i++{

                      
var obj = array[i];

                      accordion.add(
{

                            id : obj.id,

                            title : obj.text,

                            html : 
"<div   align=left valign=top    id=" + obj.id

                                       
+ "></div>"

                      }
);

                      accordion.doLayout(
true);

                      buildTree(obj.id);

                 }


           }


      }
);

      
var tab = new Ext.TabPanel({

           region : 
"center",

           margins : 
"0 5 0 0",

           deferredRender : 
false,

           activeTab : 
0,

           resizeTabs : 
true,

           enableTabScroll : 
true

      }
);

      tab.add(
{

           id : 
"welcome",

           title : 
"welcome",

           html : 
"<hr><h1>hello world</h1>"

      }
);

      
function treeClick(node, e) {

           
if (!node.isLeaf()) {

                 e.stopEvent();

           }
 else {

                 
var n = tab.getComponent(node.id);

                 alert(node.href);

                 
if (!n) {

                      
var n = tab.add({

                            
"id" : node.id,

                            
"title" : node.text,

                            closable : 
true,

                            html : 
"<iframe src=txn" + node.id

                                       
+ ".do   style='width:100%;height:100%' ></iframe>"

                      }
);

                 }


                 tab.setActiveTab(n);

           }


      }


      
function buildTree(subMenuId) {

           
var root = new Ext.tree.AsyncTreeNode({

                 text : 
"Autos",

                 draggable : 
false,

                 id : 
"source"

           }
);

           
var tree = new Ext.tree.TreePanel({

                 el : subMenuId,

                 border : 
0,

                 animate : 
true,

                 enableDD : 
false,

                 loader : 
new Ext.tree.TreeLoader({

                      dataUrl : 
"txn900001.do?subMenuId=" + subMenuId,

                      requestMethod : 
"GET"

                 }
),

                 root : root,

                 rootVisible : 
false,

                 autoHeight : 
true,

                 containerScroll : 
false

           }
);

           tree.render(subMenuId);

           root.expand();

           tree.on(
"click", treeClick);

      }


      
var header = new Ext.Panel({

           region : 
"north",

           margins : 
"0 5 0 5",

           height : 
80,

           collapsible : 
true,

           split : 
true,

           minSize : 
80,

           maxSize : 
80

      }
);

      
var status = new Ext.Panel({

           region : 
"south",

           margins : 
"0 5 5 5",

           height : 
20,

           minSize : 
20,

           maxSize : 
20,

           split : 
true

      }
);

      
var accordion = new Ext.Panel({

           region : 
"west",

           margins : 
"0 0 0 5",

           split : 
true,

           width : 
210,

           layout : 
"accordion",

           autoScroll : 
true,

           animCollapse : 
false,

           animate : 
true,

           layoutConfig : 
{

                 animate : 
true

           }


      }
);

      
var viewport = new Ext.Viewport({

           layout : 
"border",

           items : [header, status, accordion, tab]

      }
);

}
);
posted on 2008-11-01 19:39 王总兵 阅读(2120) 评论(4)  编辑  收藏 所属分类: Ext

评论

# re: Ext布局实例[未登录] 2008-12-01 21:55 人在旅途
不错哦,继续加油  回复  更多评论
  

# re: Ext布局实例 2009-06-10 11:40 mmxida
谢谢您的讲解  回复  更多评论
  

# re: Ext布局实例[未登录] 2009-11-18 17:21 aa
ext不能直接读xml?  回复  更多评论
  

# re: Ext布局实例 2011-06-05 21:20 dfdf
dddddddddddd  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: