ExtJS5学习之MVC

  1. 云栖社区>
  2. 博客>
  3. 正文

ExtJS5学习之MVC

shy丶gril 2016-05-16 16:09:25 浏览2145
展开阅读全文

  写完第一篇Hello World之后,我就一直在准备着弄弄MVC,整了2天终于弄好了,遇到问题,也只能靠自己.
其实就是用ExtJS5 搭个后台界面:


 啥都不说了,上代码。
首先需要一个app.js来定义一个ExtJS的Application,Application里去启动运行ExtJS的程序

App.js

Js代码  收藏代码
  1. Ext.QuickTips.init();  
  2. Ext.Loader.setConfig({  
  3.     enabled : true  
  4. });  
  5.   
  6. Ext.Loader.setPath({  
  7.     'Ext.ux' : 'extjs/ux',  
  8.     //'Ext.app' : 'extjs/app',  
  9.     'Portal.view' : 'extjs/app',  
  10.     'OA.util' : 'app/util'  
  11. });  
  12.   
  13. /** 
  14.  * 加载ExtJS插件文件 
  15.  */  
  16. Ext.require(  
  17.     [  
  18.         'Portal.view.Portlet',  
  19.         'Portal.view.PortalColumn',  
  20.         'Portal.view.PortalPanel',  
  21.         'Portal.view.PortalDropZone',  
  22.           
  23.         'Ext.ux.TabReorderer',  
  24.         'Ext.ux.BoxReorderer',  
  25.         'Ext.ux.TabCloseMenu',  
  26.         'Ext.ux.PageSizePaging',  
  27.         'OA.util.AppUtil'  
  28.     ]  
  29. );  
  30. Ext.application({  
  31.     requires: ['Ext.container.Viewport','OA.view.Viewport'],  
  32.     //项目名称简称  
  33.     name: 'OA',  
  34.     appFolder: 'app',  
  35.     autoCreateViewport: true,  
  36.     //控制器注册  
  37.     controllers:[  
  38.         'AppController',  
  39.         'user.UserController'  
  40.     ],  
  41.       
  42.     launch: function () {  
  43.         //Ext.create('OA.view.Viewport');  
  44.     }  
  45. });  

 app.js里有个autoCreateViewport属性,即自动创建Viewport容器,我们知道ExtJS的所有组件都是需要放进这个总容器里的,当然viewport不是必须的哈。在ExtJS4.x的时候,是需要显示的在launch里去create我们的viewport容器,autoCreateViewport可以接收true/false,true的话就会自动到app/view下查找Viewport.js文件,自动帮我们加载并帮我们创建viewport容器,这是5.x后的新特性。当然你手动create还是可行的。此外,autoCreateViewport也可以接收一个Viewport类的全路径,即指定自动加载哪个viewport.举个例子:autoCreateViewport: "OA.view,Viewport",这样,如果你的viewport不在默认app/view路径下时,就可以手动指定要加载的viewport的路径。

 

Viewport.js

Js代码  收藏代码
  1. /*********************全局视图容器类************************/  
  2. Ext.define("OA.view.Viewport",{  
  3.     extend:'Ext.container.Viewport',  
  4.     requires:['Ext.container.Viewport','OA.view.MainPanel'],  
  5.     alias : 'widget.baseviewport',  
  6.     alternateClassName: ["OA.Viewport"],  
  7.     layout: 'fit',  
  8.     loadMask:{msg : '正在加载,请稍候...'},  
  9.     items: [  
  10.         {  
  11.             xtype: 'mainpanel'  
  12.         }  
  13.     ]  
  14. });  

 Viewport里就放了一个mainpanel子组件,采用fit布局是为了让他能充满整个屏幕。

 

MainPanel.js

 

Js代码  收藏代码
  1. Ext.define("OA.view.MainPanel",{  
  2.     extend:'Ext.panel.Panel',  
  3.     alias : 'widget.mainpanel',  
  4.     alternateClassName: ["OA.MainPanel"],  
  5.     requires: ['OA.view.TopPanel','OA.view.BottomPanel','OA.view.LeftPanel','OA.view.CenterPanel'],  
  6.     layout: 'border',  
  7.     border: 0,  
  8.     initComponent: function () {  
  9.         var me = this;  
  10.         me.items = [  
  11.             {  
  12.                 xtype: 'toppanel'  
  13.             },  
  14.             {  
  15.                 xtype: 'bottompanel'  
  16.             },  
  17.             {  
  18.                 xtype: 'leftpanel'  
  19.             },  
  20.             {  
  21.                 xtype: 'centerpanel'  
  22.             }  
  23.         ];  
  24.         me.callParent(arguments);  
  25.     }  
  26. });  

 MainPanel里采用border布局,分别放了4个panel,上下左右,ExtJS的经典布局,你懂的。

 

上下左右4个panel的代码我直接贴了,代码太多就不一一解释了。

TopPanel.js

 

Js代码  收藏代码
  1. /**********************顶部Panel***********************/  
  2. Ext.define("OA.view.TopPanel",{  
  3.     extend:'Ext.panel.Panel',  
  4.     requires:["OA.view.ThemeMenu"],  
  5.     alias : 'widget.toppanel',  
  6.     alternateClassName: ["OA.TopPanel"],  
  7.     height: 50,  
  8.     split: false,  
  9.     border: 0,  
  10.     collapsible: false,  
  11.     titleCollapse: false,  
  12.     region: 'north',  
  13.     initComponent : function() {  
  14.         var me = this;  
  15.         me.items = [  
  16.             {  
  17.                 title: 'OA管理系统',     
  18.                 xtype: 'panel',  
  19.                 margins:'0 0 5 0',  
  20.                 tbar:[  
  21.                     '->',  
  22.                     '益达,欢迎您!',  
  23.                     new Date().format("yyyy年MM月dd日    hh:mm:ss  w"),  
  24.                     {  
  25.                         text:'修改密码'              
  26.                     },  
  27.                     {  
  28.                         text:'退出'              
  29.                     },  
  30.                     {  
  31.                         text: '换肤',  
  32.                         //iconCls: 'theme',  
  33.                         menu: {xtype: 'thememenu'}  
  34.                     }  
  35.                ]  
  36.             }  
  37.         ];  
  38.         me.callParent(arguments);  
  39.     }  
  40. });  

 BottomPanel.js

 

 

Js代码  收藏代码
  1. /**********************底部Panel***********************/  
  2. Ext.define("OA.view.BottomPanel",{  
  3.     extend:'Ext.panel.Panel',  
  4.     alias : 'widget.bottompanel',  
  5.     alternateClassName: ["OA.BottomPanel"],  
  6.     height: 20,  
  7.     border: 0,  
  8.     split: false,  
  9.     collapsible: false,  
  10.     titleCollapse: false,  
  11.     draggable: false,  
  12.     region: 'south',  
  13.     initComponent: function () {  
  14.         var me = this;  
  15.         Ext.apply(me, {  
  16.             tbar: ['->','OA by yida']  
  17.         });  
  18.         me.callParent(arguments);  
  19.     }  
  20. });  

 LeftPanel.js

 

 

Js代码  收藏代码
  1. /*********************左侧Panel************************/  
  2. Ext.define("OA.view.LeftPanel",{  
  3.     extend:'Ext.panel.Panel',  
  4.     requires:["OA.view.LeftTreePanel"],  
  5.     alias : 'widget.leftpanel',  
  6.     alternateClassName: ["OA.LeftPanel"],  
  7.       
  8.     initComponent : function(){  
  9.         Ext.apply(this,{  
  10.             id : "leftPanel",  
  11.             title: '导航菜单',  
  12.             width: 200,  
  13.             height: "100%",  
  14.             border: true,  
  15.             collapsed: false,  
  16.             collapsible: true,  
  17.             animCollapse: true,  
  18.             collapseMode: 'mini',  
  19.             autoScroll: false,  
  20.             containerScroll: true,  
  21.             split: true,  
  22.             resizable: false,  
  23.             region: 'west',  
  24.             layout: 'accordion',  
  25.             layoutConfig : {   
  26.                 titleCollapse: false,     
  27.                 animate : true//动态切换树空间   
  28.                 activeOnTop: true,  
  29.                 multi:false  
  30.             }    
  31.         });  
  32.         this.callParent(arguments);  
  33.     }  
  34. });  

 CenterPanel.js

 

 

Js代码  收藏代码
  1. /*******************中间Panel**************************/  
  2. Ext.define("OA.view.CenterPanel",{  
  3.     extend:'Ext.tab.Panel',  
  4.     requires:['Ext.tab.Panel'],  
  5.     alias : 'widget.centerpanel',  
  6.     alternateClassName: ["OA.CenterPanel"],  
  7.     id : "centerPanel",  
  8.     width: '100%',  
  9.     border: 0,  
  10.     enableTabScroll: true,  
  11.     autoScroll: true,  
  12.     activeItem: 0,  
  13.     region: 'center',  
  14.     layout: 'fit',  
  15.     initComponent : function() {  
  16.         var me = this;  
  17.         me.callParent(arguments);  
  18.     },  
  19.     items: [  
  20.         {    
  21.             //iconCls : 'icon-activity',    
  22.             title : '平台首页',    
  23.             xtype:'portalpanel',    
  24.             layout:'hbox',    
  25.             items : [  
  26.                 {    
  27.                     xtype : 'portalcolumn',    
  28.                     columnWidth : 0.7,    
  29.                     items:[  
  30.                         {title: '新闻动态',height : 180},    
  31.                         {title: '最新通知',height : 180},    
  32.                         {title: '业绩报表',height : 180}  
  33.                     ]    
  34.                 },  
  35.                 {    
  36.                     xtype : 'portalcolumn',    
  37.                     columnWidth : 0.3,  
  38.                     items:[  
  39.                         {title: '常用功能', height : 180},    
  40.                         {title: '待办事项',height : 180},    
  41.                         {title: '邮件列表', height : 180}  
  42.                     ]    
  43.                 }  
  44.             ]    
  45.         }  
  46.     ],  
  47.     listeners: {  
  48.         resize :function(p, width, height,oldWidth,oldHeight, eOpts) {  
  49.             p.updateLayout();  
  50.         }  
  51.     }  
  52. });  

 

 

最后贴一下AppUtil.js工具类

Js代码  收藏代码
  1. /** 
  2.  * JavaScript-Date日期类型格式化<br/> 
  3.  * 使用示例: 
  4.  * var date = new Date(); 
  5.  * alert(date.format("yyyy-MM-dd hh:mm:ss")); 
  6.  * @param {} format 
  7.  * @return {} 
  8.  */  
  9. Date.prototype.format = function(format){  
  10.  var _week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];   
  11.  var o = {  
  12.   "M+" :  this.getMonth()+1,  //month 月  
  13.   "d+" :  this.getDate(),     //day 日  
  14.   "h+" :  this.getHours(),    //hour 时  
  15.   "m+" :  this.getMinutes(),  //minute 分  
  16.   "s+" :  this.getSeconds(), //second 秒  
  17.   "q+" :  Math.floor((this.getMonth()+3)/3),  //quarter季度  
  18.   "S"  :  this.getMilliseconds(), //millisecond毫秒  
  19.   "w"  :  _week[this.getDay()+""]   //星期几  
  20.   }  
  21.     
  22.    if(/(y+)/.test(format)) {  
  23.     format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));  
  24.    }  
  25.    
  26.    for(var k in o) {  
  27.     if(new RegExp("("+ k +")").test(format)) {  
  28.       format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));  
  29.     }  
  30.    }  
  31.  return format;  
  32. }  
  33.   
  34. /** 
  35.  * 在原日期基础上添加或减去指定天(年,月,日,小时,分钟,秒)数<br/> 
  36.  * interval参数: 
  37.  * y       年  
  38.  * q       季度  
  39.  * m       月  
  40.  * d       日  
  41.  * w       周  
  42.  * h       小时  
  43.  * n       分钟  
  44.  * s       秒  
  45.  * ms      毫秒  
  46.  *  
  47.  * number参数:时间间隔,必须为数字,为正数表示获取指定间隔的未来的日期,为负数表示过去的日期 
  48.  * @param {} interval 
  49.  * @param {} number 
  50.  * @return {} 
  51.  */  
  52. Date.prototype.dateAdd = function(interval,number)   
  53. {   
  54.     var d = this;   
  55.     var k={'y':'FullYear''q':'Month''m':'Month''w':'Date''d':'Date''h':'Hours''n':'Minutes''s':'Seconds''ms':'MilliSeconds'};   
  56.     var n={'q':3, 'w':7};   
  57.     eval('d.set'+k[interval]+'(d.get'+k[interval]+'()+'+((n[interval]||1)*number)+')');   
  58.     return d;   
  59. }   
  60.   
  61. /** 
  62.  * 用于计算两个日期之间的时间间隔<br/> 
  63.  * 使用此方法还能比较两个日期的大小,如果返回值大于0,表示objDate2比较大, 
  64.  * 如果小于0,表示objDate2比较小 
  65.  * @param {} interval 
  66.  * @param {} objDate2 
  67.  * @return 返回相差的毫秒数 
  68.  */  
  69. Date.prototype.dateDiff = function(interval,objDate2)   
  70. {   
  71.     var d=this, i={}, t=d.getTime(), t2=objDate2.getTime();   
  72.     i['y']=objDate2.getFullYear()-d.getFullYear();   
  73.     i['q']=i['y']*4+Math.floor(objDate2.getMonth()/4)-Math.floor(d.getMonth()/4);   
  74.     i['m']=i['y']*12+objDate2.getMonth()-d.getMonth();   
  75.     i['ms']=objDate2.getTime()-d.getTime();   
  76.     i['w']=Math.floor((t2+345600000)/(604800000))-Math.floor((t+345600000)/(604800000));   
  77.     i['d']=Math.floor(t2/86400000)-Math.floor(t/86400000);   
  78.     i['h']=Math.floor(t2/3600000)-Math.floor(t/3600000);   
  79.     i['n']=Math.floor(t2/60000)-Math.floor(t/60000);   
  80.     i['s']=Math.floor(t2/1000)-Math.floor(t/1000);   
  81.     return i[interval];   
  82. }  
  83.   
  84. /** 
  85.  * 获取数组中某元素的索引【索引从零开始计算】 
  86.  * @param {} o 
  87.  * @return {} 
  88.  */  
  89. Array.prototype.indexOf = function(o){  
  90.     for(var i = 0,len=this.length; i<len;i++){  
  91.         if(this[i]  == o){  
  92.             return i;  
  93.         }  
  94.     }  
  95.     return -1;  
  96. }  
  97.   
  98. /** 
  99.  * 删除数组中某元素 
  100.  * @param {} o 
  101.  * @return {} 
  102.  */  
  103. Array.prototype.remove = function(o){  
  104.     var index = this.indexOf(o);  
  105.     if(index != -1){  
  106.         this.splice(index,1);  
  107.     }  
  108.     return this;  
  109. }  
  110.   
  111. /** 
  112.  * 去除数组中重复数据 
  113.  * @param {} o 
  114.  * @return {} 
  115.  */  
  116. function removeDuplicateArray(o){  
  117.     var obj={},ret=[],i=0;  
  118.     for(var a in o){  
  119.         obj[o[a]]=o[a];  
  120.     }  
  121.     for(ret[i++] in obj);  
  122.     return ret;  
  123. }  
  124.   
  125. /** 
  126.  * 去除字符串中重复字符 
  127.  * @param {} str 
  128.  * @return {} 
  129.  */  
  130. function removeDuplicateString(str){  
  131.     var obj={},ret="";  
  132.     for(var i=0;i<str.length;i++){  
  133.         var s=str.slice(i,i+1);  
  134.         obj[s]=s;  
  135.     }  
  136.     for(s in obj){  
  137.         ret += obj[s];  
  138.     };  
  139.     return ret;  
  140. }  
  141.   
  142. /** 
  143.  * 去除数组或字符串中的重复字符 
  144.  * @param {} o 
  145.  * @return {} 
  146.  */  
  147. function removeDuplicate(o){  
  148.     return typeof(o)=="object"?removeDuplicateArray(o):removeDuplicateString(o);  
  149. }  
  150.   
  151. /** 
  152.  * 删除字符串中重复字符 
  153.  * @param {} o 
  154.  * @return {} 
  155.  */  
  156. function removeRepeat(o) {  
  157.     return o.replace(/([\s\S]{1})(?:\1+)/g,'$1');  
  158. }  
  159.   
  160. /** 
  161.  * 系统工具类[静态常量和静态方法] 
  162.  */  
  163. Ext.define("OA.util.AppUtil",{  
  164.     alternateClassName: ["OA.AppUtil"],  
  165.     requires: ["OA.util.JSLoader"],  
  166.     statics: {  
  167.         basePath : window.location.protocol + '//' + window.location.host + '/'  
  168.                   + window.location.pathname.split('/')[1] + "/",  
  169.         jsBasePath : window.location.protocol + '//' + window.location.host + '/'  
  170.                   + window.location.pathname.split('/')[1] + "/js/",  
  171.         imageBasePath : window.location.protocol + '//' + window.location.host + '/'  
  172.                   + window.location.pathname.split('/')[1] + "/images/",  
  173.         cssBasePath : window.location.protocol + '//' + window.location.host + '/'  
  174.                   + window.location.pathname.split('/')[1] + "/css/",  
  175.         extjsBasePath : window.location.protocol + '//' + window.location.host + '/'  
  176.                   + window.location.pathname.split('/')[1] + "/extjs/",  
  177.         extjsThemePath : window.location.protocol + '//' + window.location.host + '/'  
  178.                   + window.location.pathname.split('/')[1] + "/extjs/theme/",  
  179.         loginPage : window.location.protocol + '//' + window.location.host + '/'  
  180.                   + window.location.pathname.split('/')[1] + "/login.jsp",  
  181.         indexPage : window.location.protocol + '//' + window.location.host + '/'  
  182.                   + window.location.pathname.split('/')[1] + "/index.jsp",  
  183.         loginUrl : window.location.protocol + '//' + window.location.host + '/'  
  184.                   + window.location.pathname.split('/')[1] + "/login.do",  
  185.         logOutUrl : window.location.protocol + '//' + window.location.host + '/'  
  186.                   + window.location.pathname.split('/')[1] + "/logout.do",  
  187.         firstTreePanelId: 1,  
  188.         /** 
  189.          * ExtJS ajax封装<br/> 
  190.          * 调用示例: 
  191.          * ajax({ 
  192.          *       url : "??.do", 
  193.          *       params : { 
  194.          *          id : "参数值", 
  195.          *          name: "参数值" 
  196.          *       }, 
  197.          *       callback : function(json){} 
  198.          *  }); 
  199.          * @param {} config 
  200.          */  
  201.         ajax : function(config) {  
  202.             Ext.Ajax.request( {  
  203.                 url : config.url,  
  204.                 params : config.params,  
  205.                 method : config.method || 'post',  
  206.                 callback : function(options, success, response) {  
  207.                     config.callback(Ext.JSON.decode(response.responseText));  
  208.                 }  
  209.             });  
  210.         },  
  211.           
  212.         /** 
  213.          * 返回星期几的中文形式 
  214.          * @param {} date 
  215.          * @return {} 
  216.          */  
  217.         getDayOfWeek : function(date) {  
  218.             var week = [ "星期日""星期一""星期二""星期三""星期四""星期五""星期六" ];  
  219.             return week[day.getDay()];  
  220.         },  
  221.           
  222.         /** 
  223.          * ExtJS组件的命令空间路径转换成组件的实际访问路径<br/> 
  224.          * 如:OA.view.user.UserPanel转换后basePath + app/view/user/UserPanel.js 
  225.          *      
  226.          * @param {} np 
  227.          * @return {} 
  228.          */  
  229.         namespace2Path : function(np) {  
  230.             if(!np) {  
  231.                 return null;  
  232.             }  
  233.             np = np + "";  
  234.             return OA.util.AppUtil.basePath + np.replace(/\./g,"/").replace("OA","app") + ".js";  
  235.         },  
  236.           
  237.         /** 
  238.          * 用户退出系统 
  239.          */  
  240.         logout : function() {  
  241.             Ext.Msg.confirm('提示'"您确认要退出系统吗?"function(btn) {  
  242.                 if (btn == "yes") {  
  243.                     OA.util.AppUtil.ajax({  
  244.                         url : OA.util.AppUtil.logOutUrl,  
  245.                         params : {},  
  246.                         callback : function(json){  
  247.                             if(json && json.success) {  
  248.                                 window.location = OA.util.AppUtil.loginPage;  
  249.                             }  
  250.                         }  
  251.                     });  
  252.                 }  
  253.             });  
  254.         },  
  255.           
  256.         /** 
  257.          * 显示当前时间的时钟信息 
  258.          * @param {} domId     时钟信息要显示在哪个dom元素上 
  259.          * @param {} pattern   日期时间显示格式,如yyyy-MM-dd hh:mm:ss 
  260.          */  
  261.         showColock : function(domId,pattern) {  
  262.             var date = new Date();  
  263.             var colockEl = Ext.get(domId);  
  264.             if(!colockEl) {  
  265.                 return;  
  266.             }  
  267.             colockEl.dom.innerHTML = date.format(pattern || "yyyy年MM月dd日    hh:mm:ss w");  
  268.         },  
  269.           
  270.         /** 
  271.          * 动态添加Tab页 
  272.          * @param {} node 
  273.          */  
  274.         openPanel: function(node,centerPanelId) {  
  275.             var max = 5;  
  276.             var id = node.data.component || "_tab0";  
  277.             var centerPanel = Ext.getCmp(centerPanelId);  
  278.             var grid = centerPanel.getComponent(node.data.id);  
  279.             if (!grid) {  
  280.                 if (this.items && this.items.length >= max) {  
  281.                     Ext.Msg.alert("错误""<span style='font-size:14px;font-weight:600;color:red;'>最多能打开5个模块,请先关闭部分不再使用的模块!</span>");  
  282.                 }  
  283.                 else {  
  284.                     var tab = {};  
  285.                     centerPanel.getEl().mask("正在加载面板,请稍候...");  
  286.                     //var cla = Ext.decode("{cla:" + id + "}",true).cla;  
  287.                     if(node.data.type == "url") {  
  288.                         tab = Ext.create("Ext.panel.Panel",{  
  289.                             itemId: node.data.id,  
  290.                             xtype: 'panel',  
  291.                             title: node.data.text,  
  292.                             layout: 'fit',  
  293.                             closable: true,  
  294.                             autoScroll: true,  
  295.                             border: true,  
  296.                             autoDestroy : true,  
  297.                             closeAction : 'destory',  
  298.                             html: '<iframe width="100%" height="100%" frameborder="0" src="' + id + '"></iframe>'  
  299.                             //iconCls: 'modelIcon'  
  300.                         });  
  301.                     } else if(node.data.type == "component") {  
  302.                         tab = Ext.create("Ext.panel.Panel",{  
  303.                             itemId: node.data.id,  
  304.                             xtype: 'panel',  
  305.                             title: node.data.text,  
  306.                             layout: 'fit',  
  307.                             closable: true,  
  308.                             autoScroll: true,  
  309.                             border: true,  
  310.                             autoDestroy : true,  
  311.                             closeAction : 'destory',  
  312.                             items:[  
  313.                                 {xtype: id}  
  314.                             ]  
  315.                         });  
  316.                     }  
  317.                     centerPanel.add(tab);  
  318.                     centerPanel.setActiveTab(tab);  
  319.                     centerPanel.doLayout();  
  320.                     centerPanel.getEl().unmask();  
  321.                 }  
  322.             }  
  323.             else {  
  324.                 centerPanel.setActiveTab(tab);  
  325.                 centerPanel.getEl().unmask();  
  326.             }  
  327.         },  
  328.           
  329.         /** 
  330.          * 动态添加TreePanel 
  331.          */  
  332.         addTreePanel : function(data,leftPanel) {  
  333.             Ext.getBody().unmask();  
  334.             for (var i = 0; i < data.length; i++) {  
  335.                 /*leftPanel.add(Ext.create("OA.view.LeftTreePanel",{ 
  336.                     id: data[i].id, 
  337.                     title: data[i].text, 
  338.                     iconCls: data[i].iconCls 
  339.                 }));*/  
  340.                 leftPanel.add({  
  341.                     xtype: "lefttreepanel",  
  342.                     itemId: data[i].id,  
  343.                     title: data[i].text,  
  344.                     iconCls: data[i].iconCls  
  345.                 });  
  346.             }  
  347.             leftPanel.doLayout();  
  348.         },  
  349.         /** 
  350.          * 添加手风琴面板 
  351.          * @param {} leftPanelId 
  352.          */  
  353.         addAccordionPanel : function(data,leftPanelId) {  
  354.             var leftPanel = Ext.getCmp(leftPanelId);  
  355.             Ext.getBody().unmask();  
  356.             for (var i = 0; i < data.length; i++) {  
  357.                 if(i == 0) {  
  358.                     leftPanel.add({  
  359.                         xtype: "panel",  
  360.                         itemId: data[i].id,  
  361.                         title: data[i].text,  
  362.                         iconCls: data[i].iconCls,  
  363.                         layout: 'fit',  
  364.                         items: [  
  365.                             {  
  366.                                 xtype: "lefttreepanel",  
  367.                                 root: {  
  368.                                     id: data[i].id,  
  369.                                     expanded: true  
  370.                                 }  
  371.                             }  
  372.                         ]  
  373.                     });  
  374.                 } else {  
  375.                     leftPanel.add({  
  376.                         xtype: "panel",  
  377.                         itemId: data[i].id,  
  378.                         title: data[i].text,  
  379.                         iconCls: data[i].iconCls,  
  380.                         layout: 'fit'  
  381.                     });  
  382.                 }  
  383.             }  
  384.             leftPanel.updateLayout();  
  385.         },  
  386.           
  387.         /** 
  388.          * 更换皮肤 
  389.          */  
  390.         changeTheme: function(itemId, checked) {  
  391.             if (checked) {  
  392.                 var css = OA.util.AppUtil.extjsThemePath;  
  393.                 cssname = itemId.replace("Skin-""").toLowerCase();  
  394.                 css += "ext-theme-" + cssname + "/ext-theme-" + (cssname == "default" ? "classic" : cssname) + "-all.css";  
  395.                 Ext.util.CSS.swapStyleSheet(null, css);  
  396.                 var exp = new Date();  
  397.                 //Cookie保存30天  
  398.                 exp.setTime(exp.getTime() + 30 * 24 * 60 * 60 * 1000);  
  399.                 Ext.util.Cookies.set("ThemeCSS", css, exp);  
  400.                 Ext.util.Cookies.set("ThemeName", itemId, exp);  
  401.             }  
  402.         }  
  403.     }  
  404. });  

 index.jsp是测试页面


 demo里也附带了换肤功能实现


    需要源代码的,请加Q-Q群 105098806

转载:http://iamyida.iteye.com/blog/2181805

网友评论

登录后评论
0/500
评论
shy丶gril
+ 关注