提高篇:第六篇,更换皮肤

本示例主要向大家介绍Ext中皮肤的使用,用几个图片向大家介绍Ext的几种皮肤都特别的漂亮,可惜雨和熊掌不可兼得,选择你喜欢的方式,也许通过这种方式能够唤醒你的学习的食欲.

 

是不是很漂亮呀.

下面是实现的代码

<head runat="server">
    <title>无标题页</title>
    <link rel="Stylesheet" type="text/css" href="http://www.cnblogs.com/ExtJS/resources/css/ext-all.css" />
    <link rel="Stylesheet" type="text/css" />  //这个很重要哦
    <script type="text/javascript" src="http://www.cnblogs.com/ExtJS/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="http://www.cnblogs.com/ExtJS/ext-all.js"></script>
    <script type="text/javascript" src="http://www.cnblogs.com/ExtJS/ext-lang-zh_CN.js"></script> 
</head>

function makeCookie()
{
    var themes =
    [
        ['default', '默认'],
        ['gray', '灰色'],
        ['green', '绿色'],
        ['olive', '橄榄绿'],
        ['pink', '粉色'],
        ['purple', '紫色'],
        ['slate', '暗蓝色']
    ];
    var cbThemes = new Ext.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=

                                                      "http://www.cnblogs.com/ExtJS/resources/css/xtheme-"+css+".css";
                   document.cookie="css="+css+";expires="+date.toGMTString();
                }
    });    

    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()
    {
          var cookiesArr=document.cookie.split(";");
          var css;
          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=

                                                       "http://www.cnblogs.com/ExtJS/resources/css/xtheme-"+css+".css";
    };
}   
Ext.onReady(makeCookie);

 

标签: 皮肤, Themes
posted @ 2008-10-22 17:16 殷良胜 阅读(3713) 评论(9) 编辑 收藏

　回复　引用　查看　  
#1楼[楼主]2008-10-30 10:55 | 殷良胜      
欢迎访问Ext小组:
http://space.cnblogs.com/group/ext

　回复　引用　  
#2楼2009-03-31 16:08 | nickyn[未注册用户]
这些样式哪里有下载呢
　回复　引用　查看　  
#3楼[楼主]2009-04-01 00:23 | 殷良胜      
--引用--------------------------------------------------
nickyn: 这些样式哪里有下载呢
--------------------------------------------------------
你好，在下载中心--本博客示例相关下载区 可以找到
　回复　引用　  
#4楼2009-05-15 15:40 | 宇洋[未注册用户]
源码在哪下载？
　回复　引用　查看　  
#5楼[楼主]2009-05-15 16:41 | 殷良胜      
--引用--------------------------------------------------
宇洋: 源码在哪下载？
--------------------------------------------------------
在下载区域下载
　回复　引用　  
#6楼2009-05-29 14:49 | 4656[未注册用户]
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=

"http://www.cnblogs.com/ExtJS/resources/css/xtheme-"+css+".css";
document.cookie="css="+css+";expires="+date.toGMTString();
}
});



没看懂
　回复　引用　查看　  
#7楼2009-06-16 08:58 | 咸鱼翻身      
楼主的意思是在设定时间范围内按照这个样式进行主题设置
　回复　引用　查看　  
#8楼2010-01-15 10:14 | 程序员2      
请问一下，可以发一份原码给我吗。我按你的做总是报错。我不知道我的错在哪里。“this.store.on 对象不支持此属性或方法” 这个错

我附上我的原码:/// <reference path="vswd-ext_2.0.2.js" />
function makeCookie() {
var themes =
[
['default', '默认'],
['gray', '灰色'],
['green', '绿色'],
['olive', '橄榄绿'],
['pink', '粉色'],
['purple', '紫色'],
['slate', '暗蓝色']
];
var cbThemes = new Ext.form.ComboBox
({
id: 'cbThemes',
hiddenName: 'comboxid', //提交到后台的input的name
store: themes,
width: 80,
typeAhead: true,
mode: 'local',
triggerAction: 'all',// 触发器被激活时执行的动作
emptyText: '界面主题', //空字段中显示的文本(默认为 null)。注意，只要这个字段是被激活的而且name属性是有被指定的，那么也会发送到服务端。
selectOnFocus: true //valueField : 'value',//值 displayField : 'text',//显示文本
});
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 = "extjs/resources/css/xtheme-" + css + ".css";
document.cookie = "css=" + css + ";expires=" + date.toGMTString();
}
});
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() {
var cookiesArr = document.cookie.split(";");

Ext.Msg.alert("分类："+cookiesArr.length);
var css;
for (var i = 0; i < cookiesArr.length; i++) {
var arr = cookiesArr[i].split("=");
if (arr[0] == "css") {
css = arr[1];
break;
}
}
document.getElementsByTagName("link")[i].href = "ExtJS/resources/css/xtheme-" + css + ".css";
};
}
Ext.onReady(makeCookie);
　回复　引用　查看　  
#9楼2010-08-18 23:19 | secondgalaxy      
楼主：
var css = newValue.data.value;
为什么会提示找不到呢，
用Field.value反而可以呢
最新IT新闻:
· 美国空军拟最多购买1.8万台iPad 2
· 伊朗封杀Gmail和Facebook等互联网服务
· 分析称专利之争让谷歌苹果两败俱伤
· Android平台发现新型手机病毒Rootsmart
· HTC首款Android4.0手机大曝光
» 更多新闻...