extjs使利用cookie换肌肤

index.js

Ext.onReady(function() {
 Ext.BLANK_IMAGE_URL = 'images/s.gif';
 Ext.QuickTips.init();
 // 树形配置开始
 var functionTree = new Ext.tree.TreePanel({
    iconCls : 'usr-defined-menu',
    title : '功能菜单',
    region : 'west',
    id : 'menutree',
    autoScroll : true,
    enableDD : false,// 是否支持拖拽效果
    containerScroll : true,// 是否支持滚动条
    split : true,
    width : 180,
    minSize : 175,
    maxSize : 300,
    rootVisible : true,// 是否显示跟节点
    collapseMode : 'mini',// 在分割线处出现按钮
    collapsible : true,
    margins : '0 0 0 0',
    loader : new Ext.tree.TreeLoader({
       dataUrl : 'getFunctionTree.do'
      }),
    root : new Ext.tree.AsyncTreeNode({
       text : '功能树',
       id : '0',
       expanded : true
      }),

    tbar : [{
       text : '展开',
       handler : function() {
        functionTree.expandAll();
       },
       scope : this
      }, '-', {
       text : '收缩',
       handler : function() {
        functionTree.collapseAll();
       },
       scope : this
      }, '-', {
       xtype : "combo",
       fieldLabel : '皮肤',
       hiddenName : 'theme',
       width : 80,
       store : new Ext.data.SimpleStore({
          fields : ['text', 'value'],
          data : [
            ['绿色芳香', 'xtheme-green.css'],
            ['蓝色月影', 'xtheme-blue.css'],
            ['诱惑紫色', 'xtheme-purple.css'],
            ['灰色回忆', 'xtheme-gray.css'],
            ['深蓝心情', 'xtheme-slate.css'],
            ['深灰色', 'xtheme-darkgray.css'],
            ['靛青色', 'xtheme-indigo.css'],
            ['深夜', 'xtheme-midnight.css'],
            ['slickness',
              'xtheme-slickness.css']]
         }),
       forceSelection : true,// 输入值不能是选项中不存在的
       emptyText : '选择您喜欢的皮肤',
       mode : 'local',
       triggerAction : 'all',
       valueField : 'value',
       displayField : 'text',
       initEvents : function() {
        this.on('collapse', function() {
           // 实际改变风格样式的处理
           var themeName = Ext.util.Cookies
             .get("myTheme");
           if (themeName != this.getValue()) {
            Ext.util.CSS
              .swapStyleSheet(
                'theme',
                'ext-3.1.1/resources/css/'
                  + this
                    .getValue());
            updateThemeCookie("myTheme",
              this.getValue(), 24
                * 30);
           }
          });
       }
      }]
   });
 // 树菜单的单击事件监听
 functionTree.on('click', function(node) {
  if (node.isLeaf()) { // 若节点是叶子节点的话返回true
   var tabId = 'tab-' + node.id;
   var hasTab = centerBody.get(tabId);
   if (hasTab) {
    centerBody.setActiveTab(hasTab);
   } else {
    var itemPanel = new Ext.Panel({
     id : tabId,
     title : node.attributes.text,
     border : false,
     autoDestroy : true,
     closable : true,
     html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'
       + node.attributes.link + '"></iframe>'
    });
    centerBody.add(itemPanel);
    centerBody.setActiveTab(itemPanel);
   }
  }
 });

 var centerBody = new Ext.TabPanel({
  region : 'center',
  activeTab : 0,
  enableTabScroll : true,
  items : new Ext.Panel({
   id : '0',
   title : '首页',
   border : false,
   autoDestroy : true,
   closable : false,
   html : '<iframe scrolling="no" frameborder="0" width="100%" height="100%" src="jsp/center.jsp"></iframe>'
  })
 });

 centerBody.on('tabchange', function(tab, newtab) {
    var nodeId = newtab.id.replace('tab-', '');
    var node = functionTree.getNodeById(nodeId);
    if (node) {
     functionTree.getSelectionModel().select(node);
    } else {
     functionTree.getSelectionModel().clearSelections();
    }
   });
 // 树形配置结束

 // 表单配置开始
 var form = new Ext.form.FormPanel({
    defaultType : 'textfield',
    labelAlign : 'right',
    title : 'form',
    labelWidth : 50,
    frame : true,
    width : 220,

    title : 'center-center',
    region : 'center',

    items : [{
       fieldLabel : '文本框',
       anchor : '90%'
      }],
    buttons : [{
       text : '按钮'
      }]
   });
 // 表单配置结束

 // 布局开始
 var viewport = new Ext.Viewport({
    layout : 'border',

    items : [
//    new Ext.BoxComponent(
       {
         region : 'north',
         height : 60,
//         el : 'north',
         hideCollapseTool :true,
         split : true,
         collapseMode : 'mini',// 在分割线处出现按钮
         collapsible : true,
         html:"<div  id='north' class='topbandj'>"+
         "<span>"+
         "<table width='400' border='0' cellspacing='0' cellpadding='0'>"+
         "<tr>"+
             "<td><img src='images/icon002.png' width='16' height='14' align='absmiddle' style='margin-bottom:3px;*margin-bottom:3px;_margin-bottom:6px;'>日期："+year+"年"+yue+"月"+day+"日  星期"+Ext.get('week').getValue()+"</td>"+
          " </tr>"+
          "<tr>"+
           " <td>"+   
            "<img src='images/icon001.png' width='15' height='19' align='absmiddle' style='margin-bottom:4px;'>当前用户"+Ext.get('user').getValue()+
             "<img src='images/icon003.png' width='22' height='22' align='absmiddle' style='margin-bottom:4px;'><a href='loginCancel.do'>注销</a>"+
             "<a href='#'><img src='images/button001.gif' width='76' height='23' align='absmiddle' style='margin-bottom:4px;'  onclick='updatePass()'></a>"+
          "</td>"+
           "</tr>"+
         "</table>"+
         
         "</span>"+
         "<img src='images/logozone.jpg' width='315' height='49' class='imgs'></div>"
        }
//        )
        , functionTree, centerBody]
   });
  // 布局结束

});
function updatePass() {
 var formPanel = new Ext.FormPanel({
    labelWidth : 90,
    bodyStyle : 'padding:5px 5px 0',
    width : 330,
    labelSeparator : '：',
    labelAlign : 'right',
    defaultType : 'textfield',
    items : [{
       fieldLabel : '旧密码',
       name : 'user_pwd',
       maxLength : 30,
       minLength : 4,
       width : 150,
       allowBlank : false,
       inputType : 'password',
       blankText : '旧密码不能为空！'
      }, {
       fieldLabel : '新密码',
       name : 'new_user_pwd',
       id : 'new_user_pwd',
       maxLength : 30,
       minLength : 4,
       width : 150,
       allowBlank : false,
       inputType : 'password',
       blankText : '新密码不能为空！'
      }, {
       fieldLabel : '密码确认',
       name : 'new_pwd',
       id : 'new_pwd',
       maxLength : 30,
       minLength : 4,
       width : 150,
       allowBlank : false,
       inputType : 'password',
       blankText : '密码确认不能为空！'
      }]
   });
 var win = new Ext.Window({
    title : '修改密码',
    layout : 'fit',
    width : 330,
    height : 160,
    closeAction : 'close',
    plain : true,
    resizable : false,
    items : formPanel,
    modal : true,
    constrainHeader : true,
    buttons : [{
     text : '保存',
     handler : function() {
      if (formPanel.form.isValid()) {
       if (Ext.get('new_user_pwd').getValue() != Ext
         .get('new_pwd').getValue()) {
        Ext.MessageBox.alert('提示', '两次新密码输入不一致！');
        return;
       }
       formPanel.form.submit({
          method : 'POST',
          url : 'updateUserPassword.do',
          success : function(form, action) {
           var result = action.result.info;
           if (result == '0') {
            win.close();
            Ext.MessageBox.alert('提示',
              '修改密码成功！');
           } else if (result == '1') {
            Ext.MessageBox.alert('提示',
              '旧密码输入错误！');
           } else if (result == '2') {
            Ext.MessageBox.alert('提示',
              '两次新密码输入不一致！');
           }

          },
          failure : function(form, action) {
           Ext.MessageBox.alert('提示',
             '修改密码失败！');
          }
         });
      }
     }
    }, {
     text : '取消',
     handler : function() {
      win.close();
     }
    }]
   });
 win.show();
}

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@page import="com.vqh.inspection.entity.User,java.util.Calendar "%> 
<%
User user = (User)session.getAttribute("user");
Calendar cal = Calendar.getInstance();
int date = cal.get(Calendar.DAY_OF_WEEK);
String week = date==1?"日":date==2?"一":date==3?"二":date==4?"三":date==5?"四":date==6?"五":"六";
%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>3G智能巡检系统-主界面</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<jsp:include page="includeExt.jsp"></jsp:include>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/iepng.js"></script>
<script type="text/javascript">
  var year=<%=cal.get(Calendar.YEAR) %>;
  var yue=<%=cal.get(Calendar.MONTH)+1 %>;
  var day=<%=cal.get(Calendar.DATE) %>;
</script>
</head>
<body>
<input type="hidden" id='week' value='<%=week %>'/><input type="hidden" id='user' value='<%=user.getUser_name() %>'/>
<div id="west"></div>
<div id="center"></div>
</body>
</html>

includeExt.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<link rel="stylesheet" type="text/css" href="ext-3.1.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext-3.1.1/resources/css/xtheme-green.css" />
<script type="text/javascript" src="ext-3.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.1.1/ext-all.js"></script>
<script type="text/javascript" src="ext-3.1.1/src/locale/ext-lang-zh_CN.js"></script> 
<script type="text/javascript">

var queryImg="<img src='images/query.gif' border='0' width='20' height='20' title='查看' alt='查看'/>";
var editImg="<img src='images/edit.gif' border='0' width='20' height='20' title='编辑' alt='编辑'/>";
var deleteImg="<img src='images/del.gif' border='0' width='20' height='20' title='删除' alt='删除'/>";
var picImg="<img src='images/editpic.gif' border='0' width='20' height='20' title='图片' alt='图片'/>";
var resetPwdImg="<img src='images/resetPwd.gif' border='0' width='20' height='20' title='密码重置' alt='密码重置'/>";
var copyImg="<img src='images/copy.gif' border='0' width='20' height='20' title='复制' alt='复制'/>";
var stateImg="<img src='images/changeState.gif' border='0' width='20' height='20' title='更改状态' alt='更改状态'/>";
var inspectionImg="<img src='images/inspectionItem.gif' border='0' width='20' height='20' title='查看巡检项' alt='查看巡检项'/>";
var defectImg="<img src='images/selDefect.gif' border='0' width='20' height='20' title='查看缺陷' alt='查看缺陷'/>";
var deviceImg="<img src='images/selDevice.gif' border='0' width='20' height='20' title='查看设备' alt='查看设备'/>";
var assignImg="<img src='images/reAssign.gif' border='0' width='20' height='20' title='重新分配' alt='重新分配'/>";

var searchImg="images/search.gif";
var operateImg="images/operation.gif";
var exportFileImg="images/exportFile.gif";
var addUserImg="images/addUser.gif";
var addImg="images/add.gif";
var importImg="images/import.gif"
var downloadImg="images/download.gif"
function changeTheme(cssName){
 Ext.util.CSS.swapStyleSheet('theme', 'ext-3.1.1/resources/css/'+cssName);
}
function updateThemeCookie(name,value,expiresHours){
 var theme = getCookie(name);
    if(value!=theme){
     theme = value;
    }
  var date=new Date();
    if(expiresHours>0){
   date.setTime(date.getTime()+expiresHours*3600*1000);
   }
    document.cookie= name + "="+escape (theme)+";expires="+date.toGMTString();  
}
function getCookie(name)//读取cookies函数       
{
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
    if(arr != null) return unescape(arr[2]); return null;
}

function getTheme(){
 var strcookie=document.cookie;
 var hrefStr = document.getElementsByTagName("link")[1].outerHTML;
    var theme=getCookie("myTheme");
    if(hrefStr.indexOf(theme)<0){
  document.getElementsByTagName("link")[1].href="ext-3.1.1/resources/css/"+theme;
   }
}

</script>

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>3G智能巡检系统-登录界面</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript">
function CookieEnable(){  
    var result=false;  
    if(navigator.cookiesEnabled)  return true;  
    document.cookie = "testcookie=yes;";  
    var cookieSet = document.cookie;  
    if (cookieSet.indexOf("testcookie=yes") > -1)  result=true;  
    document.cookie = "";  
    return result;  
}  

function checkCookie(cookieName)
{
  var c = document.cookie.indexOf(cookieName+"=");
  if (c != -1)
  {
    return true;
  }
  else{
   return false;
  }
}
  if(!CookieEnable()){  
    alert("对不起，您的浏览器的Cookie功能被禁用，请开启");        
  }
function addCookie(name,value,expiresHours){
 var cookieString=name+"="+escape(value);
 if(expiresHours>0){
 var date=new Date();
 date.setTime(date.getTime()+expiresHours*3600*1000);
 cookieString=cookieString+"; expires="+date.toGMTString();
 }
 document.cookie=cookieString;
}
function isAddCookie(){
 if(CookieEnable()){
  if(!checkCookie("myTheme")){
   addCookie("myTheme","xtheme-green.css",30*24);
  }
 }
}
function changeValidateCode(obj){
     var timenow = new Date().getTime();
     obj.src="<%=request.getContextPath()%>/validateCodeImage?d="+timenow;
}
function check(){
   var f = document.form1;
   var matches = /^[a-zA-Z]{1}[a-zA-Z_0-9]{1,16}[a-zA-Z0-9]{1}$/;
   if(isNull(f.username.value)){
       alert("用户名不能为空！");
       f.username.focus();
       return false;
   }else if(!matches.exec(f.username.value)){
       alert("用户名由3-18位字母、数字或下划线组成，由字母开头，字母或数字结尾");
       f.username.focus();
       return false;
   }else if(isNull(f.password.value)){
       alert("密码不能为空！");
       f.password.focus();
       return false;
   }else if(isNull(f.validatecode.value)){
       alert("验证码不能为空！");
       f.validatecode.focus();
       return false;
   }else{
       return true;
   }
}

function isNull(val){
   if(val.replace(/^\s+|\s+$/g,"").length==0)
   {
      return true;
   }
   return false;
}
</script>
</head>
<body style="background-color:#27a097;">
<div class="loginzone">
<form action="login.do" method="post" name="form1" onsubmit="return check();">
<table width="290" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <th width="26%" height="36" align="right">用户名 </th>
      <td width="74%">     <input name="username" type="text" class="inputlog" id="username" onblur="if(this.value==''){this.value='请输入用户名';}" onfocus="if(this.value=='请输入用户名'){this.value='';}" value="请输入用户名"/>
    </td>
    </tr>
    <tr>
      <th height="36" align="right">密<span style="margin-left:15px;">码</span></th>
      <td><input name="password" type="password" class="inputlog" id="password"  onblur="if(this.value==''){this.value='请输入密码';}" onfocus="if(this.value=='请输入密码'){this.value='';}" value="请输入密码"/></td>
    </tr>
    <tr>
      <th height="36" align="right">验证码</th>
      <td><input name="validatecode" type="text" class="inputlog2" >
        <img alt="验证码" id="validatecode" src="<%=request.getContextPath()%>/validateCodeImage" onclick="changeValidateCode(this)"  width="60" height="20" align="absmiddle" /></td>
    </tr>
    <tr>
      <th height="36">&nbsp;</th>
      <td><label>
        <input name="button" type="submit" class="butlog" id="button" value="登  录" onclick="window.location='###'" />
     
        <input name="button2" type="reset" class="butlog" id="button2" value="清  空" />
</label></td>
    </tr>
  </table>
  </form>
</div>
${requestScope.message }
</body>
</html>