教你如何更换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=newExt.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(vari=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;
var MyPanel=newExt.form.FormPanel({
title:'皮肤应用',
renderTo:Ext.getBody(),
width:300,
height:150,
frame:true,
labelWidth:70,
x:400,
y:100,
shadow:true,
floating:true,
draggable:{
insertProxy: false,//拖动时不虚线显示原始位置
onDrag : function(e){
var pel = this.proxy.getEl();
this.x =pel.getLeft(true);
this.y =pel.getTop(true);//获取拖动时panel的坐标
var s =this.panel.getEl().shadow;
if (s){
s.realign(this.x, this.y,pel.getWidth(), pel.getHeight());
}
},
endDrag: function(e){
this.panel.setPosition(this.x, this.y);//移动到最终位置
}
},
labelAlign:'center',
labelSeparator:':',
items:[
Mycombo
]
});
源码效果:
<%@ PageLanguage="C#" AutoEventWireup="true" CodeBehind="Ext8.aspx.cs" Inherits="EXT1.Ext8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Extjs中工具栏和菜单栏介绍与应用</title>
<link href="ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<link rel="Stylesheet" type="text/css" />
<script src="ext-3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext-3.2.0/ext-all.js" type="text/javascript"></script>
<script src="MyJS/Skin.js" type="text/javascript"></script>
<style type="text/css">
.newFile{background-image: url(MyImage/NewFile.ico) !important;}
.openFile{background-image: url(MyImage/OpenFile.ico) !important;}
.saveFile{background-image: url(MyImage/saveFile.ico) !important;}
</style>
<scripttype="text/javascript">
functionRead1() {
varMyToolbar=newExt.Toolbar({
width:300,
x:400,
y:100,
floating:true,
frame:true,
renderTo:document.body,
items:[
{
text:'新建',
handler:function () {
alert("新建");
},
iconCls:'newFile'
},
{
text:'打开',
iconCls:'openFile'
},
{
text:'保存',
iconCls:'saveFile'
},
{text:'111'},{text:'222'}
]
});
}
functionRead2() {
varMyToolBar=newExt.Toolbar({
width:300,
x:400,
y:100,
floating:true,
frame:true,
renderTo:document.body,
items:[
{
text:'地图管理',
handler:function () {
alert("新建");
},
iconCls:'newFile',
menu:Mymenu
},
{
text:'地图编辑',
iconCls:'openFile'
},
{
text:'生成地图',
iconCls:'saveFile'
},
{text:'111'},{text:'222'}
]
});
var Mymenu=new Ext.menu.Menu({
shadow:'drop',
items:[
{
text:'地图管理'
},
{
text:'地图编辑'
},
{
text:'生成地图'
}
]
});
}
functionmakeCookie()
{
var themes=
[
['default', '默认'],
['blue', '灰色'],
['gray', '绿色'],
['access', '橄榄绿'],
['pink', '粉色'],
['purple', '紫色'],
['slate', '暗蓝色']
];
varcbThemes = newExt.form.ComboBox
({
id: 'cbThemes',
store:themes,
width: 80,
typeAhead: true,
triggerAction: 'all',
emptyText:'界面主题',
selectOnFocus:true
});
cbThemes.on
({
"select":function(field,newValue,oldValue)
{
var css = newValue.data.value;
//设置cookies
var date=new Date();
date.setTime(date.getTime()+30*24*3066*1000);
document.getElementsByTagName("link")[1].href="ext-3.2.0/resources/css/xtheme-"+css+".css";
document.cookie="css="+name+";expires="+date.toGMTString();//设置cookies
}
});
var win = new Ext.Window
({
title:"测试更换皮肤窗口",renderTo:document.body,width:500,height:300,x:300,y:100,
bbar:['更换皮肤','',cbThemes]
});
win.show();
document.body.onload = function()
{
varcookiesArr=document.cookie.split(";");
varcss;
for(var i=0;i<cookiesArr.length;i++)
{
var arr=cookiesArr[i].split("=");
if(arr[0]=="css")
{
css=arr[1];
break;
}
}
document.getElementsByTagName("link")[1].href="ext-3.2.0/resources/css/xtheme-"+css+".css";
};
}
functionRead3() {
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']
];
varMystore=newExt.data.SimpleStore({
fields:['theme','css'],
data:themes
});
varMyPanel=newExt.form.FormPanel({
title:'表单应用二',
renderTo:Ext.getBody(),
width:300,
height:320,
frame:true,
labelWidth:70,
x:400,
y:100,
shadow:true,
floating:true,
draggable:{
insertProxy: false,//拖动时不虚线显示原始位置
onDrag : function(e){
var pel = this.proxy.getEl();
this.x =pel.getLeft(true);
this.y =pel.getTop(true);//获取拖动时panel的坐标
var s =this.panel.getEl().shadow;
if (s){
s.realign(this.x, this.y,pel.getWidth(), pel.getHeight());
}
},
endDrag: function(e){
this.panel.setPosition(this.x, this.y);//移动到最终位置
}
},
labelAlign:'center',
labelSeparator:':',
items:[
{
xtype:'combo',
fieldLabel:'更换皮肤',
id:'css',
triggerAction:'all',
store:Mystore,
displayField:'theme',
valueField:'css',
value:'默认',
mode:'local',
anchor:'95%',
handleHeight:10,
resizable:true,
selectOnfocus:true,
typeAhead:true,
initEvents : function() {
this.on('collapse', function() {
Ext.util.CSS.swapStyleSheet('theme', 'ext-3.2.0/resources/css/'+ this.getValue());
});
}
}
]
});
}
functionRead4() {
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
});
varMycombo=newExt.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();
}
});
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;
varMyPanel=newExt.form.FormPanel({
title:'皮肤应用',
renderTo:Ext.getBody(),
width:300,
height:150,
frame:true,
labelWidth:70,
x:400,
y:100,
shadow:true,
floating:true,
draggable:{
insertProxy: false,//拖动时不虚线显示原始位置
onDrag : function(e){
var pel = this.proxy.getEl();
this.x =pel.getLeft(true);
this.y =pel.getTop(true);//获取拖动时panel的坐标
var s =this.panel.getEl().shadow;
if (s){
s.realign(this.x, this.y,pel.getWidth(), pel.getHeight());
}
},
endDrag: function(e){
this.panel.setPosition(this.x, this.y);//移动到最终位置
}
},
labelAlign:'center',
labelSeparator:':',
items:[
Mycombo
]
});
}
Ext.onReady(Read4);
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="id1">
</div>
</form>
</body>
</html>