目標：
瞭解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>