目标：
了解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
});
定义下拉列表框：
var Mycombo=new Ext.form.ComboBox({
fieldLabel:'更换皮肤',
id:'css',
triggerAction:'all',
store:Mystore,
displayField:'theme',
valueField:'css',
value:'默认',
mode:'local',
anchor:'95%',
handleHeight:10,
resizable:true,
selectOnfocus:true,
typeAhead:true
});
Mycombo.on //定义事件
({
"select":function()
{
var css = Mycombo.getValue();
//设置cookies
var date=new Date();
//alert(css);
date.setTime(date.getTime()+30*24*3066*1000);
document.getElementsByTagName("link")[1].href="ext-3.2.0/resources/css/"+css;
document.cookie="css="+css+";expires="+date.toGMTString();
}
});
要保存到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 >
332
219
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
