Liny_@NotePad

沉迷ACG中

Ext换肤(可将主题存储到Cookies中。。)

YOYO posted @ 2009年10月28日 18:10 in 【Web开发】客户端 with tags 主题 EXT Cookies 换肤 , 5771 阅读

虽然Ext 默认的皮肤Vista很不错,但是总不能所有系统都长那样嘛。。于是本文介绍下Ext 换肤的方法。。

需要时调用Ext.util.CSS.swapStyleSheet('theme', '你的css');方法即可。。

结合《extjs换肤功能》和《ExtJS 用Cookie更换主题》,这里整合了一个简单的使用下拉框切换皮肤的样例,并且会保存到cookies,在ff和ie6下测试通过:

  1. <title>定制个性化风格</title>
  2. <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css">
  3. <link rel="stylesheet" type="text/css" href=""/>
  4. <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
  5.                 <script type="text/javascript" src="lib/ext/ext-all.js"></script>
  6.                 <script type="text/javascript" src="lib/ext/ext-lang-zh_CN.js"></script>
  7. <script type="text/javascript">
  8. //定义使用改变个性化定制的控件
  9. //该控制实际上为一个可供选择样式表值的下拉框
  10. //当改变下拉框的选择时则调用Ext.util.CSS.swapStyleSheet来替换其样式表路径
  11. Ext.ux.ThemeChange = Ext.extend(Ext.form.ComboBox,{
  12.         editable : false,
  13.         displayField : 'theme',
  14.         valueField : 'css',
  15.         typeAhead : true,
  16.         mode : 'local',
  17.         value : '默认',
  18.         readonly : true,
  19.         triggerAction : 'all',
  20.         selectOnFocus : true,
  21.         initComponent : function(){
  22.                 var themes = [
  23.                                 ['默认', 'ext-all.css'],
  24.                                 ['黑色', 'xtheme-black.css'],
  25.                                 ['深灰色', 'xtheme-darkgray.css'],
  26.                                 ['浅灰色', 'xtheme-gray.css'],
  27.                                 ['绿色', 'xtheme-green.css'],
  28.                                 ['橄榄色', 'xtheme-olive.css'],
  29.                                 ['粉色', 'xtheme-pink.css'],
  30.                                 ['紫色', 'xtheme-purple.css'],
  31.                                 ['暗蓝色', 'xtheme-slate.css'],
  32.                                 ['靛青色', 'xtheme-indigo.css'],
  33.                                 ['Slickness', 'xtheme-slickness.css'],
  34.                                 ['深夜', 'xtheme-midnight.css']
  35.                 ];
  36.                 this.store = new Ext.data.SimpleStore({
  37.                         fields : ['theme', 'css'],
  38.                         data : themes
  39.                 });
  40.         },
  41.         initEvents : function(){
  42.                 this.on('collapse', function(){
  43.                         var name = this.getValue();
  44.                         var date = new Date();
  45.                         date.setTime(date.getTime() + 30*24*3066*1000);
  46.                         document.cookie = "css=" + name + ";expires=" + date.toGMTString();
  47.  
  48.                         //实际改变风格样式的处理
  49.                         Ext.util.CSS.swapStyleSheet('theme', 'lib/ext/resources/css/'+ name);
  50.                 });
  51.         }
  52. });
  53. Ext.reg('xthemeChange', Ext.ux.ThemeChange);
  54.  
  55. Ext.onReady(function(){
  56.         var cookiesArr = document.cookie.split(";");
  57.         var cssName = "";
  58.  
  59.         for(var i=0; i<cookiesArr.length; i++){
  60.                 var arr = cookiesArr[i].split("=");
  61.                 if(arr[0] == "css"){
  62.                         cssName = arr[1];
  63.                         break;
  64.                 }
  65.         };
  66.  
  67.         var themeList = new Ext.ux.ThemeChange();
  68.  
  69.         if(cssName != ""){
  70.                 Ext.util.CSS.swapStyleSheet('theme', "lib/ext/resources/css/" + cssName);
  71.                 themeList.setValue(cssName);
  72.         }
  73.  
  74.         //实例化一个可以改变风格样式的组件
  75.         var pan = new Ext.Panel({
  76.                 title:'定制个性化风格',
  77.                 items: themeList
  78. ,
  79.                 height:200,
  80.                 width:300
  81.         });
  82.         pan.render("hr_panel");
  83. });
  84. </script>
  85. </head>
  86.         <table cellspacing="5" cellpadding="5"><tr><td><div id="hr_panel"></div></td></tr></table>
  87. </body>
  88. </html>

EXT2的皮肤可以在这里下到一些:http://www.javaeye.com/topic/216240

解压后覆盖resources目录下的css和images即可,注意需要修改css中的图像URL……

BlackBeetle 说:
2009年10月29日 17:31

换肤是可以实现了。。。就是那个cookies的貌似没有实现。。

Head_small
YOYO 说:
2009年10月29日 21:24

@BlackBeetle: 为虾米 我在ff和ie6下都测试OK啊。。


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter