ExtJS5学习之MVC

  写完第一篇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里也附带了换肤功能实现


    需要源代码的，请加Ｑ-Ｑ群 105098806

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