Ext布局实例

Ext布局实例

 

       最近研究了下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]

      });

} );