EXTJS学习笔记:更换皮肤

EXTJS中更换皮肤很简单,以下是效果图,后面附上源代码
效果图: 










Ext/resources/css/ext-all.css

Ext/adapter/ext/ext-base.js
Ext/ext-all.js
三个文件从这里下载

ContractedBlock.gif ExpandedBlockStart.gif Code
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    
<title>EXTJS 更换皮肤</title>
   
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
   
<link rel="stylesheet" type="text/css" /><%--这句很重要,用于更换皮肤的CSS--%>
    <script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
    
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

function makeCookie()
ExpandedBlockStart.gifContractedBlock.gif
{
    var themes 
= 
    [
        [
'default''默认'],
        [
'gray''灰色'],
        [
'darkgray''暗灰色'],
        [
'olive''橄榄绿'],
        [
'black''黑色'],
        [
'purple''紫色'],
        [
'slate''暗蓝色']
    ];
    var cbThemes 
= new Ext.form.ComboBox
ExpandedSubBlockStart.gifContractedSubBlock.gif    (
{
        id: 
'cbThemes',
        store: themes,
        width: 
80,
        typeAhead: 
true,
        triggerAction: 
'all',
        emptyText:
'界面主题',
        selectOnFocus:
true
    }
);
    cbThemes.on
ExpandedSubBlockStart.gifContractedSubBlock.gif    (
{
        
"select":function(field,newValue,oldValue)
ExpandedSubBlockStart.gifContractedSubBlock.gif                
{
                   var css 
=   newValue.data.value;
                   
//设置cookies
                   var date=new Date();
                   date.setTime(date.getTime()
+30*24*3066*1000);
                   document.getElementsByTagName(
"link")[1].href="Ext/resources/css/xtheme-" + css + ".css";
                   document.cookie
="css="+css+";expires="+date.toGMTString();
                }

    }
);     

    var win 
= new Ext.Window
ExpandedSubBlockStart.gifContractedSubBlock.gif    (
{
        title:
"更换皮肤测试窗口",renderTo:document.body,width:500,height:300,x:300,y:100,
        bbar:[
'皮肤选择','',cbThemes]       
    }
);
    win.show();

    document.body.onload 
= function()
ExpandedSubBlockStart.gifContractedSubBlock.gif    
{
          var cookiesArr
=document.cookie.split(";");
          var css;
          
for(var i=0;i<cookiesArr.length;i++)
ExpandedSubBlockStart.gifContractedSubBlock.gif          
{
               var arr
=cookiesArr[i].split("=");
               
if(arr[0]=="css")
ExpandedSubBlockStart.gifContractedSubBlock.gif               
{
                  css
=arr[1];
                  
break;
               }

          }

          document.getElementsByTagName(
"link")[1].href = "Ext/resources/css/xtheme-" + css + ".css";
    }
;
}
    
Ext.onReady(makeCookie);
</script>
</head>
<body>
    
<form id="form1" runat="server">
    
<div>
    
    
</div>
    
</form>
</body>
</html>

转载于:https://www.cnblogs.com/chhuic/archive/2009/09/29/1576360.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值