Ext布局实例

 

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

      

      用户管理">

           人员管理" href="#" leaf="true" />

           单位管理" href="#" leaf="true" />

           行政代码管理" href="#" leaf="true" />

           用户管理" href="#" leaf="true" />

           权限功能管理" href="#" leaf="true" />

     

      采伐证管理">

           人员管理" href="#" leaf="true" />

           单位管理" href="#" leaf="true" />

           行政代码管理" href="#" leaf="true" />

           用户管理" href="#" leaf="true" />

           权限功能管理" href="#" leaf="true" />

     

       最终页面效果如下示：

       代码比较多，不能全部贴出来，最核心的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 : "                                       + ">"

                      });

                      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 : "

---

hello world

"

      });

      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 : "

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

                      });

                 }

                 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]

      });

});

王兵 2008-11-01 19:39 发表评论