extjs 更换皮肤

如何在当前浏览器更换皮肤

最新推荐文章于 2025-06-30 12:03:45 发布

木易_颖

最新推荐文章于 2025-06-30 12:03:45 发布

阅读量1.1k

点赞数

分类专栏： extjs 文章标签： extjs

extjs 专栏收录该内容

4 篇文章

订阅专栏

目标：

了解3种办法更换皮肤

内容：

1，直接在当前浏览器更换皮肤

2，在当前浏览器更换皮肤并保存到cookle

3，在当前浏览器更换皮肤并保持到config文件

　　   1.直接添加其他css文件换肤.
          皮肤文件:xtheme-olive.zip下载
          把皮肤文件解压,把css文件(如xtheme-olive.css)拷贝到extjs的resources目录下css文件夹里面:

解压皮肤文件,把里面的相应的 image文件夹下的目录(比如olive)拷贝到extjs的resources目录下images文件夹下

设置css文件如下:

其实就是在原有的基础上添加了个xtheme-olive.css文件。

定义Store

var themes = [
            ['默认', 'ext-all.css'],
            ['紫色', 'xtheme-purple.css'],
            ['橄榄色', 'xtheme-olive.css'],
            ['暗蓝色', 'xtheme-slate.css'],
            ['浅灰色', 'xtheme-darkgray.css'],
            ['绿色', 'xtheme-gray.css'],
            ['椒盐色', 'xtheme-galdaka.css'],
            ['粉色', 'xtheme-pink.css'],
            ['靛青色', 'xtheme-indigo.css'],
            ['深夜', 'xtheme-midnight.css'],
            ['银白色', 'xtheme-silverCherry.css']
          ];
          var Mystore=new Ext.data.SimpleStore({
            fields:['theme','css'],
            data:themes
          });

定义下拉列表框：

要保存到cookle需要添加下面代码：

     var cookieArr = window.document.cookie.split(";");
            var css = null;
            for(var i=0;i<cookieArr.length;i++) {
            var arr = cookieArr[i].split("=");
            if(arr[0]=="css") {
                  css = arr[1];
                 }
            };
            alert(css);
            window.document.getElementsByTagName("link")[1].href="ext-3.2.0/resources/css/"+css;

面板容器

 1  var MyPanel=new Ext.form.FormPanel({
 2             title:'皮肤应用',
 3             renderTo:Ext.getBody(),
 4             width:300,
 5             height:150,
 6             frame:true,
 7             labelWidth:70,
 8             x:400,
 9             y:100,
10             shadow:true,
11             floating:true,
12             draggable:{ 
13                    insertProxy: false,//拖动时不虚线显示原始位置 
14                   onDrag : function(e){ 
15                     var pel = this.proxy.getEl(); 
16                        this.x = pel.getLeft(true); 
17                        this.y = pel.getTop(true);//获取拖动时panel的坐标 
18             var s = this.panel.getEl().shadow; 
19             if (s){ 
20                 s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); 
21             } 
22             }, 
23             endDrag : function(e){ 
24                       this.panel.setPosition(this.x, this.y);//移动到最终位置 
25                 } 
26             },
27             labelAlign:'center',
28             labelSeparator:':',
29             items:[
30                 Mycombo
31             ]
32         });

本课件源码：

代码

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ext8.aspx.cs" Inherits="EXT1.Ext8" %>
  2 
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4 
  5 <html xmlns="http://www.w3.org/1999/xhtml" >
  6 <head runat="server">
  7     <title>第八课,Extjs中工具栏和菜单栏介绍与应用</title>
  8     <link href="ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
  9     <link rel="Stylesheet" type="text/css" /> 
 10     <script src="ext-3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script>
 11     <script src="ext-3.2.0/ext-all.js" type="text/javascript"></script>
 12 
 13     <script src="MyJS/Skin.js" type="text/javascript"></script>
 14     <style type="text/css">
 15         .newFile {background-image: url(MyImage/NewFile.ico) !important;}
 16         .openFile {background-image: url(MyImage/OpenFile.ico) !important;}
 17         .saveFile {background-image: url(MyImage/saveFile.ico) !important;}
 18     </style>
 19     <script type="text/javascript">
 20     function Read1() {
 21         var MyToolbar=new Ext.Toolbar({
 22             width:300,
 23             x:400,
 24             y:100,
 25             floating:true,
 26             frame:true,
 27             renderTo:document.body,
 28             items:[
 29                {
 30                     text:'新建',
 31                     handler:function () {
 32                         alert("新建");
 33                     },
 34                     iconCls:'newFile'
 35                 },
 36                 {
 37                     text:'打开',
 38                     iconCls:'openFile'
 39                 },
 40                 {
 41                     text:'保存',
 42                     iconCls:'saveFile'
 43                 },
 44                 {text:'111'},{text:'222'}
 45             ]
 46         });      
 47     }
 48     function Read2() {
 49         var MyToolBar=new Ext.Toolbar({
 50             width:300,
 51             x:400,
 52             y:100,
 53             floating:true,
 54             frame:true,
 55             renderTo:document.body,
 56             
 57            items:[
 58                {
 59                     text:'地图管理',
 60                     handler:function () {
 61                         alert("新建");
 62                     },
 63                     iconCls:'newFile',
 64                     menu:Mymenu
 65                 },
 66                 {
 67                     text:'地图编辑',
 68                     iconCls:'openFile'
 69                     
 70                 },
 71                 {
 72                     text:'生成地图',
 73                     iconCls:'saveFile'
 74                 },
 75                 {text:'111'},{text:'222'}
 76             ]
 77         });
 78         var Mymenu=new Ext.menu.Menu({
 79             shadow:'drop',
 80        
 81             items:[
 82                 {
 83                     text:'地图管理'
 84                 },
 85                 {
 86                     text:'地图编辑'
 87                 },
 88                 {
 89                     text:'生成地图'
 90                 }
 91             ]
 92         });
 93     }
 94     function makeCookie()
 95     {
 96         var themes = 
 97         [
 98             ['default', '默认'],
 99             ['blue', '灰色'],
100             ['gray', '绿色'],
101             ['access', '橄榄绿'],
102             ['pink', '粉色'],
103             ['purple', '紫色'],
104             ['slate', '暗蓝色']
105         ];
106         var cbThemes = new Ext.form.ComboBox
107         ({
108             id: 'cbThemes',
109             store: themes,
110             width: 80,
111             typeAhead: true,
112             triggerAction: 'all',
113             emptyText:'界面主题',
114             selectOnFocus:true
115         });
116         cbThemes.on
117         ({
118             "select":function(field,newValue,oldValue)
119                     {
120                        var css =   newValue.data.value;
121                        //设置cookies
122                         var date=new Date();
123                        date.setTime(date.getTime()+30*24*3066*1000);
124                        document.getElementsByTagName("link")[1].href="ext-3.2.0/resources/css/xtheme-"+css+".css";
125                        document.cookie="css="+name+";expires="+date.toGMTString();//设置cookies
126                     }
127         });     
128 
129         var win = new Ext.Window
130         ({
131             title:"测试更换皮肤窗口",renderTo:document.body,width:500,height:300,x:300,y:100,
132             bbar:['更换皮肤','',cbThemes]       
133         });
134         win.show();
135 
136         document.body.onload = function()
137         {
138               var cookiesArr=document.cookie.split(";");
139               var css;
140               for(var i=0;i<cookiesArr.length;i++)
141               {
142                    var arr=cookiesArr[i].split("=");
143                    if(arr[0]=="css")
144                    {
145                       css=arr[1];
146                       break;
147                    }
148               }
149               document.getElementsByTagName("link")[1].href="ext-3.2.0/resources/css/xtheme-"+css+".css";
150         };
151 
152     }    
153     function Read3() {
154         var themes = [
155             ['默认', 'ext-all.css'],
156             ['紫色', 'xtheme-purple.css'],
157             ['橄榄色', 'xtheme-olive.css'],
158             ['暗蓝色', 'xtheme-slate.css'],
159             ['浅灰色', 'xtheme-darkgray.css'],
160             ['绿色', 'xtheme-gray.css'],
161             ['椒盐色', 'xtheme-galdaka.css'],
162             ['粉色', 'xtheme-pink.css'],
163             ['靛青色', 'xtheme-indigo.css'],
164             ['深夜', 'xtheme-midnight.css'],
165             ['银白色', 'xtheme-silverCherry.css']
166           ];
167         var Mystore=new Ext.data.SimpleStore({
168             fields:['theme','css'],
169             data:themes
170         });
171         var MyPanel=new Ext.form.FormPanel({
172             title:'表单应用二',
173             renderTo:Ext.getBody(),
174             width:300,
175             height:320,
176             frame:true,
177             labelWidth:70,
178             x:400,
179             y:100,
180             shadow:true,
181             floating:true,
182             draggable:{ 
183                    insertProxy: false,//拖动时不虚线显示原始位置 
184                   onDrag : function(e){ 
185                     var pel = this.proxy.getEl(); 
186                        this.x = pel.getLeft(true); 
187                        this.y = pel.getTop(true);//获取拖动时panel的坐标 
188             var s = this.panel.getEl().shadow; 
189             if (s){ 
190                 s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); 
191             } 
192             }, 
193             endDrag : function(e){ 
194                       this.panel.setPosition(this.x, this.y);//移动到最终位置 
195                 } 
196             },
197             labelAlign:'center',
198             labelSeparator:':',
199             items:[
200                 {
201                     xtype:'combo',
202                     fieldLabel:'更换皮肤',
203                     id:'css',
204                     triggerAction:'all',
205                     store:Mystore,
206                     displayField:'theme',
207                     valueField:'css',
208                     value:'默认',
209                     mode:'local',
210                     anchor:'95%',
211                     handleHeight:10,
212                     resizable:true,
213                     selectOnfocus:true,
214                     typeAhead:true,
215                     initEvents : function() {
216                     this.on('collapse', function() {
217                      Ext.util.CSS.swapStyleSheet('theme', 'ext-3.2.0/resources/css/'+ this.getValue());
218                     });
219                    }
220                 }
221             ]
222         });
223     }
224     
225     
226     
227     
228     
229     function Read4() {
230           var themes = [
231             ['默认', 'ext-all.css'],
232             ['紫色', 'xtheme-purple.css'],
233             ['橄榄色', 'xtheme-olive.css'],
234             ['暗蓝色', 'xtheme-slate.css'],
235             ['浅灰色', 'xtheme-darkgray.css'],
236             ['绿色', 'xtheme-gray.css'],
237             ['椒盐色', 'xtheme-galdaka.css'],
238             ['粉色', 'xtheme-pink.css'],
239             ['靛青色', 'xtheme-indigo.css'],
240             ['深夜', 'xtheme-midnight.css'],
241             ['银白色', 'xtheme-silverCherry.css']
242           ];
243           var Mystore=new Ext.data.SimpleStore({
244             fields:['theme','css'],
245             data:themes
246           });
247           var Mycombo=new Ext.form.ComboBox({
248                     fieldLabel:'更换皮肤',
249                     id:'css',
250                     triggerAction:'all',
251                     store:Mystore,
252                     displayField:'theme',
253                     valueField:'css',
254                     value:'默认',
255                     mode:'local',
256                     anchor:'95%',
257                     handleHeight:10,
258                     resizable:true,
259                     selectOnfocus:true,
260                     typeAhead:true
261           });
262           Mycombo.on
263             ({
264                 "select":function()
265                         {
266                            var css =   Mycombo.getValue();
267                            //设置cookies
268                            var date=new Date();
269                            //alert(css);
270                            date.setTime(date.getTime()+30*24*3066*1000);
271                            document.getElementsByTagName("link")[1].href="ext-3.2.0/resources/css/"+css;
272                            document.cookie="css="+css+";expires="+date.toGMTString();
273                         }
274             }); 
275             var cookieArr = window.document.cookie.split(";");   
276             var css = null;
277             for(var i=0;i<cookieArr.length;i++) {
278             var arr = cookieArr[i].split("=");
279             if(arr[0]=="css") {
280                   css = arr[1];
281                  }
282             };
283             alert(css);
284             window.document.getElementsByTagName("link")[1].href="ext-3.2.0/resources/css/"+css;
285            
286             
287             var MyPanel=new Ext.form.FormPanel({
288             title:'皮肤应用',
289             renderTo:Ext.getBody(),
290             width:300,
291             height:150,
292             frame:true,
293             labelWidth:70,
294             x:400,
295             y:100,
296             shadow:true,
297             floating:true,
298             draggable:{ 
299                    insertProxy: false,//拖动时不虚线显示原始位置 
300                   onDrag : function(e){ 
301                     var pel = this.proxy.getEl(); 
302                        this.x = pel.getLeft(true); 
303                        this.y = pel.getTop(true);//获取拖动时panel的坐标 
304             var s = this.panel.getEl().shadow; 
305             if (s){ 
306                 s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); 
307             } 
308             }, 
309             endDrag : function(e){ 
310                       this.panel.setPosition(this.x, this.y);//移动到最终位置 
311                 } 
312             },
313             labelAlign:'center',
314             labelSeparator:':',
315             items:[
316                 Mycombo
317             ]
318         });
319         
320     }
321     Ext.onReady(Read4);
322     </script>
323 </head>
324 <body>
325     <form id="form1" runat="server">
326     <div id="id1">
327     
328     </div>
329     </form>
330 </body>
331 </html>