Ext换肤

luciesfly

浏览: 70656 次
性别:
来自: 上海

最近访客更多访客>>

123nihao

星空涟漪

alex.du

jason1212

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (51)

社区版块

存档分类

2010-06 ( 51)
更多存档...

EXT CSS

   1.
      <html>
   2.
      <head>
   3.
      <title>定制个性化风格</title>
   4.
      <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css">
   5.
      <link rel="stylesheet" type="text/css" href=""/>
   6.
      <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
   7.
                      <script type="text/javascript" src="lib/ext/ext-all.js"></script>
   8.
                      <script type="text/javascript" src="lib/ext/ext-lang-zh_CN.js"></script>
   9.
      <script type="text/javascript">
10.
      //定义使用改变个性化定制的控件
11.
      //该控制实际上为一个可供选择样式表值的下拉框
12.
      //当改变下拉框的选择时则调用 Ext.util.CSS.swapStyleSheet来替换其样式表路径
13.
      Ext.ux.ThemeChange = Ext.extend(Ext.form.ComboBox,{
14.
              editable : false,
15.
              displayField : 'theme',
16.
              valueField : 'css',
17.
              typeAhead : true,
18.
              mode : 'local',
19.
              value : '默认',
20.
              readonly : true,
21.
              triggerAction : 'all',
22.
              selectOnFocus : true,
23.
              initComponent : function(){
24.
                      var themes = [
25.
                                      ['默认', 'ext-all.css'],
26.
                                      ['黑色', 'xtheme-black.css'],
27.
                                      ['深灰色', 'xtheme-darkgray.css'],
28.
                                      ['浅灰色', 'xtheme-gray.css'],
29.
                                      ['绿色', 'xtheme-green.css'],
30.
                                      ['橄榄色', 'xtheme-olive.css'],
31.
                                      ['粉色', 'xtheme-pink.css'],
32.
                                      ['紫色', 'xtheme-purple.css'],
33.
                                      ['暗蓝色', 'xtheme-slate.css'],
34.
                                      ['靛青色', 'xtheme-indigo.css'],
35.
                                      ['Slickness', 'xtheme-slickness.css'],
36.
                                      ['深夜', 'xtheme-midnight.css']
37.
                      ];
38.
                      this.store = new Ext.data.SimpleStore({
39.
                              fields : ['theme', 'css'],
40.
                              data : themes
41.
                      });
42.
              },
43.
              initEvents : function(){
44.
                      this.on('collapse', function(){
45.
                              var name = this.getValue();
46.
                              var date = new Date();
47.
                              date.setTime(date.getTime() + 30*24*3066*1000);
48.
                              document.cookie = "css=" + name + ";expires=" + date.toGMTString();
49.

50.
                              //实际改变风格样式的处理
51.
                              Ext.util.CSS.swapStyleSheet('theme', 'lib/ext/resources/css/'+ name);
52.
                      });
53.
              }
54.
      });
55.
      Ext.reg('xthemeChange', Ext.ux.ThemeChange);
56.

57.
      Ext.onReady(function(){
58.
              var cookiesArr = document.cookie.split(";");
59.
              var cssName = "";
60.

61.
              for(var i=0; i<cookiesArr.length; i++){
62.
                      var arr = cookiesArr[i].split("=");
63.
                      if(arr[0] == "css"){
64.
                              cssName = arr[1];
65.
                              break;
66.
                      }
67.
              };
68.

69.
              var themeList = new Ext.ux.ThemeChange();
70.

71.
              if(cssName != ""){
72.
                      Ext.util.CSS.swapStyleSheet('theme', "lib/ext/resources/css/" + cssName);
73.
                      themeList.setValue(cssName);
74.
              }
75.

76.
              //实例化一个可以改变风格样式的组件
77.
              var pan = new Ext.Panel({
78.
                      title:'定制个性化风格',
79.
                      items: themeList
80.
      ,
81.
                      height:200,
82.
                      width:300
83.
              });
84.
              pan.render("hr_panel");
85.
      });
86.
      </script>
87.
      </head>
88.
      <body>
89.
              <table cellspacing="5" cellpadding="5"><tr><td><div id="hr_panel"></div></td></tr></table>
90.
      </body>
91.
      </html>

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

分享到：