梦幻之旅

DEBUG - 天道酬勤

   :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  671 随笔 :: 6 文章 :: 256 评论 :: 0 Trackbacks
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
 <title>定制个性化风格</title>
 <link rel="stylesheet" type="text/css" href="/ext330/resources/css/ext-all.css" />
    <script type="text/javascript" src="/ext330/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/ext330/ext-all.js"></script>
    <script type="text/javascript" src="/myCookie.js"></script>
   
 <script type="text/javascript">
  Ext.ux.ThemeChange = Ext.extend(Ext.form.ComboBox,{
    editable : false,
          displayField : 'theme',
          valueField : 'css',
          typeAhead : true,
          mode : 'local',
          value : '默认',
          readonly : true,
          triggerAction : 'all',
          selectOnFocus : true,
          initComponent : function(){
                  var themes = [
                                  ['默认', 'ext-all.css'],
                                  ['浅灰色', 'xtheme-gray.css']
                  ];
                  this.store = new Ext.data.SimpleStore({
                          fields : ['theme', 'css'],
                          data : themes
                  });
          },
          initEvents : function(){
                  this.on('collapse', function(){
                          var name = this.getValue();
                          setCookie("myThemeCss", name, '1h');
                          Ext.util.CSS.swapStyleSheet('theme', '/ext330/resources/css/'+ name);
                  });
          }
  });
  Ext.reg('xthemeChange', Ext.ux.ThemeChange);
  Ext.onReady(function(){
          var myThemeCss = getCookieVal("myThemeCss");
          alert(myThemeCss);
          var themeList = new Ext.ux.ThemeChange();
         if(myThemeCss != ""){
                 Ext.util.CSS.swapStyleSheet('theme', '/ext330/resources/css/' + myThemeCss);
                 themeList.setValue(myThemeCss);
          }
  
          //实例化一个可以改变风格样式的组件
          var pan = new Ext.Panel({
                  title:'定制个性化风格',
                  items: themeList,
                  height:200,
                  width:300
          });
          pan.render("hr_panel");
  });
  </script>
</head>
<body>
        <table cellspacing="5" cellpadding="5"><tr><td><div id="hr_panel"></div></td></tr></table>
</body>
</html>
posted on 2010-10-20 12:03 HUIKK 阅读(560) 评论(0)  编辑  收藏 所属分类: EXT

只有注册用户登录后才能发表评论。


网站导航: