Extjs更换皮肤
目标：
了解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