一个ExtJS实例

最新推荐文章于 2019-06-18 10:28:17 发布

程序员小董

最新推荐文章于 2019-06-18 10:28:17 发布

阅读量807

点赞数

分类专栏：前端文章标签： ExtJS 前端 JavaScript

本文链接：https://blog.csdn.net/dlf123321/article/details/51382532

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

聊聊ExtJS
这几天接触了一个项目前台用的是extjs 发现这个东西还是有点意思的
就把前台的部分剥离了下来有兴趣的朋友可以当做模板学习

不多说先上效果图

这篇文章可以看作是ext知识的一个汇总
因此我不想讲太多细碎的知识点但我会一一之命这些知识点在哪里可以找到
另一方面 ext细碎的知识点确实太多自己没有精力也不想搞的太清楚够用就行
我会说一些我认为最重要的部分
首先希望大家看看这篇文章
http://www.cnblogs.com/iamlilinfeng/archive/2012/06/26/2563047.html关于ext的布局
在项目里主要用到了两种布局 accordion BorderLayout
其次还有一个TabPanel 这个大家可以参考 (文库里面的第三页)
http://wenku.baidu.com/link?url=NE2POFUVQ4QopprUDiRmgyj3McqpT8WOJ5yw7Rp59GGa56BBm1lB2aEiaZ-anxgghfm4hTYHpF9mMfLXQSgc92dUV-1B7x4qoxcnzG4Zv5u

先看admin_main.jsp 页面如下

 
   [html]  
   view plain 
  
 <%@ page language="java" pageEncoding="UTF-8"%>  
   
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
 <html>  
     <head>  
         <title>资源共享平台</title>  
         <meta http-equiv="pragma" content="no-cache">  
         <meta http-equiv="cache-control" content="no-cache">  
         <meta http-equiv="expires" content="0">  
         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
         <meta http-equiv="description" content="This is my page">  
         <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />  
         <link rel="stylesheet" type="text/css"  
             href="ext/resources/css/ext-all.css" />  
         <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>  
         <script type="text/javascript" src="ext/ext-all.js"></script>  
         <script type="text/javascript" src="js/admin_main.js"></script>  
       
 <style type="text/css">  
 //css省略 详细代码见附件  
 </style>  
     </head>  
     <body>  
         <div id="loading-mask"></div>  
         <div id="loading">  
             <div style="text-align: center; padding-top: 25%">  
                 <img src="images/loading32.gif" width="32" height="32"  
                     style="margin-right: 8px;" />  
                 页面加载中......  
             </div>  
         </div>  
     </body>  
 </html>  

很简单吧只用loading这个div里面的图片大家去images里面看看就知道了页面会不断播放那个gif同时显示"页面加载中..."
直到整个页面加载完毕

 
   [html]  
   view plain 
  
 <script type="text/javascript" src="js/admin_main.js"></script>  

我们再看看admin_main.js

这部分很长很长大家有点耐心我先整体讲一下
从12-67行的代码显示了后台管理部分的代码
从75-188行的代码显示的是资源共享的代码
至于两部分中的listener部分暂时先不管它处理的是导航树被点击后的效果
从196-213行的代码吧上面两部分用tabPanel 集合起来作为一个整体
同时注意这部分代码region : 'west' 可以知道这个整体又作为一个borderlayout布局的左边部分
从217-223行的代码显示的是整个页面的顶部
从227-245行的代码我们可以认为它定义了一个"类"(或者说是界面也行) 它就是整个屏幕的主题
从246-265部分用的是继承的知识我们定义了一个新的组件 MainPanel
可参考下面这篇文章
http://blog.csdn.net/alastormoody/article/details/8251018
mainTabPanel = new MainPanel();
这个很容易理解了我们的mainTabPanel是MainPanel的一个实例
当然这里也需要一点frame的知识
http://www.w3school.com.cn/tags/tag_frame.asp
现在大家回想12-67 75-188 部分的listener 应该能看懂了

 
   [javascript]  
   view plain 
  
 Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';  
 Ext.QuickTips.init();  
 var menu = null;  
 var mainTabPanel = null;  
 var rightMenu = null;  
   
 Ext.onReady(function(){  
   
     var appUrlData;  
     var appUrlStore;  
   
     var rightRoot = new Ext.tree.AsyncTreeNode({  
                 id : 'rightRoot',  
                 text : '后台管理rightRoot',  
                 expanded : true  
             });  
   
     var rightLoader = new Ext.tree.TreeLoader({  
              dataUrl:'getAdminAppTree.action'  
         });  
     rightLoader.processResponse = function(response, node, callback) {  
         var json = response.responseText;  
         try {  
             json = eval("(" + json + ")");  
             // 从json中获得json数组，这里的appTree与Struts2返回的json对象中的appTree对应  
             var o = json["jsonText"];  
             o = eval("(" + o + ")");  
             if(o==""||o==null){  
                 Ext.getDom("mainframe").contentWindow.location.href = "common/global_error.jsp";  
             }else{  
                 node.beginUpdate();  
                 for (var i = 0, len = o.length; i < len; i++) {  
                     var n = this.createNode(o[i]);  
                     if (n) {  
                         node.appendChild(n);  
                     }  
                 }  
                 node.endUpdate();  
                 if (typeof callback == "function") {  
                         callback(this, node);  
                 }  
             }  
         } catch (e) {  
             this.handleFailure(response);  
         }  
     }  
       
     rightMenu = new Ext.tree.TreePanel({  
                 id : 'rightMenu',  
                 loader : rightLoader,  
                 title : '后台管理rightMenu',  
                 root : rightRoot,  
                 rootVisible : true,  
                 autoHeight : true,  
                 autoScroll : true,  
                 containerScroll : true,  
                 animate : false,  
                 /*frame : true,*/  
                 listeners: {  
                             click: function(n,e) {  
                                 if(n.isLeaf()){       
                                     mainTabPanel.get(0).update('<iframe id="mainframe" scrolling="auto" frameborder="0" width="100%" height="100%" src="'+n.attributes.url+'"></iframe>',false);  
                                     mainTabPanel.setActiveTab(0);                                                             
                                 }  
                             }  
                         }  
             });  
       
       
     //*******************************************//  
       
       
     //资源共享的三个组件 start   end在188左右  
     //其一 (其实每一个组将都是一个treePanel)  
     var appTreeRoot1 = new Ext.tree.AsyncTreeNode({  
                 id : 'appTreeRoot1',  
                 expanded : true  
             });   
     var appTreeLoader1 = new Ext.tree.TreeLoader(  
         {   id:'appTreeLoader1',  
             dataUrl : 'getGroupAppTree.action?appGroupId=1'  
         }  
     );  
     var appTreeMenu1 = new Ext.tree.TreePanel({  
                 id : 'menu1',  
                 loader : appTreeLoader1,  
                 title : ' 资源共享appTreeMenu1',  
                 root : appTreeRoot1,  
                 border : false,  
                 autoScroll : true,//滚动条  
                 useArrows : true,//是否使用箭头样式  
                 animate : true,//展开,收缩动画  
                 rootVisible : false,  
                 /* 
                 enableDD : true, 
                 frame : true, 
                 */  
                 listeners: {  
                             click: function(n,e) {  
   
                                 mainTabPanel.get(0).update('<iframe id="mainframe" scrolling="auto" frameborder="0" width="100%" height="100%" src="'+n.attributes.url+'"></iframe>',false);  
                                 mainTabPanel.setActiveTab(0);  
                             }  
                         }  
             });  
       
     //其二  
     var appTreeRoot2 = new Ext.tree.AsyncTreeNode({  
                 id : 'appTreeRoot2',  
                 expanded : true               
             });   
     var appTreeLoader2 = new Ext.tree.TreeLoader(  
         {   id : 'appTreeLoader2',  
             dataUrl : 'getGroupAppTree.action?appGroupId=2'  
         }  
     );  
     var appTreeMenu2 = new Ext.tree.TreePanel({  
                 id : 'menu2',  
                 loader : appTreeLoader2,  
                 title : ' 资源管理appTreeMenu2',  
                 root : appTreeRoot2,  
                 border : false,  
                 autoScroll : true,//滚动条  
                 useArrows : true,//是否使用箭头样式  
                 animate : true,//展开,收缩动画  
                 rootVisible:false,  
                 /* 
                 enableDD : true, 
                 frame : true, 
                 */  
                 listeners: {  
                             click: function(n,e) {  
                                 mainTabPanel.get(0).update('<iframe id="mainframe" scrolling="auto" frameborder="0" width="100%" height="100%" src="'+n.attributes.url+'"></iframe>',false);  
                                 mainTabPanel.setActiveTab(0);  
                                 // Ext.getDom("mainframe").contentWindow.location.href =n.attributes.url;  
                             }  
                         }  
             });  
       
     //其三          
     var appTreeRoot10 = new Ext.tree.AsyncTreeNode({  
                 id : 'appTreeRoot5',  
                 expanded : true  
             });   
     var appTreeLoader10 = new Ext.tree.TreeLoader(  
         {   id : 'appTreeLoader5',  
             dataUrl : 'getGroupAppTree.action?appGroupId=10'  
         }  
     );  
     var appTreeMenu10 = new Ext.tree.TreePanel({  
                 id : 'menu10',  
                 loader : appTreeLoader10,  
                 title : ' 账号管理',  
                 root : appTreeRoot10,  
                 border : false,  
                 autoScroll : true,//滚动条  
                 useArrows : true,//是否使用箭头样式  
                 animate : true,//展开,收缩动画  
                 rootVisible : false,  
                 /* 
                 enableDD : true, 
                 frame : true, 
                 */  
                 listeners: {  
                             click: function(n,e) {  
                                 mainTabPanel.get(0).update('<iframe id="mainframe" scrolling="auto" frameborder="0" width="100%" height="100%" src="'+n.attributes.url+'"></iframe>',false);  
                                 mainTabPanel.setActiveTab(0);  
                                   
                                 // Ext.getDom("mainframe").contentWindow.location.href =n.attributes.url;  
                             }  
                         }  
             });  
               
     var leftAppTreeMenu = new Ext.Panel({  
         id : 'leftAppTreeMenu',  
         layout : 'accordion',  
         border:false,  
         title:'资源共享asdfasdf',  
         layoutConfig:{  
             titleCollapse:true,  
             animate:true,  
             activeOnTop:false},  
         items:[appTreeMenu1,appTreeMenu2,appTreeMenu10]   
       
         });   
       
     // 开始于75资源共享 三个组件 集合起来       使用acordion视图  
      
       
     //menu是整个左边导航   
     //注意menu是tabPanel  
     //leftapptreemenu是panel  
     //rightMenu是treemenu  与leftapptreemenu的三个组件是一个类型  
     //在menu之上 还有一个viewport 它作为全局界面 使用borderlayout  
     //menu的region是west  
     menu = new Ext.TabPanel( {  
         id : 'menu',  
         activeTab : 0,  
         width : 310,  
         split : true,  
         region : 'west',  
         // deferredRender : false,  
         resizeTabs : true,  
         minTabWidth : 100,  
         tabWidth : 100,  
         frame : true,  
         items : [leftAppTreeMenu,rightMenu],  
         listeners:{  
             tabchange:function(t, tab) {  
                 tab.doLayout();  
             }  
         }  
     });  
    
   
       
    var northpanel = new Ext.Panel({  
                             id:'north',  
                             region:'north',  
                             layout:'column',  
                             height:100,  
                             html:'<div style="width:100%; background: url(images/main_title_bg.gif) repeat-x;"><img src="images/main_title.gif" /><span id="logout"><a href="javascript:void(0)" οnclick="popHelp()">用户手册</a> | <a href="logout.action" target="_top">注销</a></span></div>'  
                             });  
      
   
       
     MainPanel = function() {  
         this.openTab = function(panel, id) {  
             var o = (typeof panel == "string" ? panel : id || panel.id);  
             var tab = this.getComponent(o);  
             if (tab) {  
                 this.setActiveTab(tab);  
             } else if (typeof panel != "string") {  
                 panel.id = o;  
                 var p = this.add(panel);  
                 this.setActiveTab(p);  
             }  
         };  
         this.closeTab = function(panel, id) {  
             var o = (typeof panel == "string" ? panel : id || panel.id);  
             var tab = this.getComponent(o);  
             if (tab) {  
                 this.remove(tab);  
             }  
         };  
         MainPanel.superclass.constructor.call(this, {  
                     id : 'main',  
                     region : 'center',  
                     margins : '0 5 5 0',  
                     resizeTabs : true,  
                     minTabWidth : 180,  
                     tabWidth : 180,  
                     enableTabScroll : true,  
                     activeTab : 0,  
                     /*draggable : true,*/  
                     items : {  
                         id : 'homePage',  
                         title : '主页',  
                         closable : false,  
                         html : '<iframe id="mainframe" name="mainframe" scrolling="yes" frameborder="0" width="100%" height="100%" src="common/blank.html"></iframe>'  
                     }  
                 });  
     };  
       
     Ext.extend(MainPanel, Ext.TabPanel);  
       
     mainTabPanel = new MainPanel();  
       
       
     var viewport = new Ext.Viewport({  
                 layout : 'border',  
                 items : [northpanel,mainTabPanel,menu]  
             });  
       
             
 });  

这个主面板最开始的时候引用的src是common/blank.html 白板一张而已

 
   [javascript]  
   view plain 
  
 var viewport = new Ext.Viewport({  
             layout : 'border',  
             items : [northpanel,mainTabPanel,menu]  
         });  

ViewPort不必细究就是一个全屏的window而已
看他的布局大家就应该明白这个viewPort就是我们看到的界面

前后台交互用的是json 与struts 这里就不再赘述相关知识点了网上资料一搜一大堆
下面是响应的action处理方法

 
   [java]  
   view plain 
  
   /** 
  * 读取系统管理员"后台管理"版块的目录树结构 
  */  
 public String getAdminAppTree() throws Exception {  
     System.out.println("getAdminAppTree");  
     this.jsonText = "[{'id':6,'text':'角色管理','children':[{'id':61,'text':'创建角色','leaf':true,'url':'modules/role/creatRole/creatRole.jsp'},{'id':62,'text':'设定角色应用权限','leaf':true,'url':'modules/role/setRoleApp/setRoleApp.jsp'},{'id':64,'text':'删除角色','leaf':true,'url':'modules/role/deleteRole/deleteRole.jsp'}]},{'id':7,'text':'用户管理','children':[{'id':71,'text':'创建用户','leaf':true,'url':'modules/user/creatUser/creatUser.jsp'},{'id':72,'text':'用户信息管理','leaf':true,'url':'modules/user/viewUserInf/viewUserInf.jsp'},{'id':73,'text':'设定用户所属角色','leaf':true,'url':'modules/user/setUserRole/setUserRole.jsp'}]}]";  
     System.out.println("jsonText=    "+this.jsonText);  
   
     return SUCCESS;  
 }  
   
 /** 
  * 根据GroupId,读取该用户在该应用组内的所有应用 
  */  
 public void getGroupAppTree() throws Exception {  
     JSONArray ja=null;  
     System.out.println("getGroupAppTree  默认");  
     if (appGroupId==10) {  
         System.out.println("getGroupAppTree  10");  
         ja=  new JSONArray("[{'id':11,'text':'标准化资源共享','leaf':true,'url':'modules/file/baseShare/baseShare.jsp'},{'id':12,'text':'标准化工具','leaf':true,'url':'modules/file/tool/tool.jsp'},{'id':13,'text':'资源环境共享','leaf':true,'url':'modules/file/webShare/webShare.jsp'}]");  
     }  
     if (appGroupId==2) {  
         System.out.println("getGroupAppTree  2");  
         ja=new JSONArray("[{'id':21,'text':'资源检索','leaf':true,'url':'modules/Manager/search/search.jsp'},{'id':23,'text':'资源审核','leaf':true,'url':'modules/Manager/manager/manager.jsp'},{'id':24,'text':'资源删除','leaf':true,'url':'modules/Manager/delete/delete.jsp'},{'id':27,'text':'资源结算','leaf':true,'url':'modules/Manager/cal/cal.jsp'}]");  
     }  
     if (appGroupId==1) {  
         System.out.println("getGroupAppTree  1");  
         ja=new JSONArray("[{'id':101,'text':'修改账号信息','leaf':true,'url':'modules/account/changeAccountInf/changeAccountInf.jsp'},{'id':102,'text':'修改账号密码','leaf':true,'url':'modules/account/changePassword/changePassword.jsp'},{'id':104,'text':'权限申请','leaf':true,'url':'modules/account/applyPermission/applyPermission.jsp'}]");  
     }  
       
       
     PrintWriter out;  
     this.response.setContentType("text/html;charset=UTF-8");  
     out = this.response.getWriter();  
     out.print(ja.toString());  
     out.close();  
 }  