梦幻之旅

DEBUG - 天道酬勤
   :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  671 随笔 :: 6 文章 :: 256 评论 :: 0 Trackbacks
Ext 换肤2 原创
js:
//操作cookie类
var myCookie = 
{ 
    isAllowed: document.cookie && document.cookie != '', 
    set: function(cn, cv, d, dm)
    { 
        var now = new Date(); 
        var expire = new Date(); 
        if (d == null || d == 0) 
        { 
            d = 1; 
        } 
        expire.setTime(now.getTime() + 3600000 * 24 * d);
        var cookieStr = cn + '=' + encodeURI(cv) + ';expires=' + expire.toGMTString() + ';domain=' + window.location.hostname + '; path=/'; 
        document.cookie = cookieStr;
    }, 
    clear: function(cn, dm)
    { 
        if (this.get(name)) 
        { 
            document.cookie = cn + '=' + ((domain) ? '; domain=' + dm : '') + '; expires=Thu, 01-Jan-70 00:00:01 GMT'; 
        } 
    }, 
    get: function(cn)
    {
        var dc = document.cookie; 
        var prefix = cn + '='; 
        var begin = dc.indexOf('; ' + prefix); 
        if (begin == -1) 
        { 
            begin = dc.indexOf(prefix); 
            if (begin != 0) 
            { 
                return null; 
            } 
        } 
        else 
        { 
            begin += 2; 
        } 
        var end = document.cookie.indexOf(';', begin); 
        if (end == -1) 
        { 
            end = dc.length; 
        } 
        return decodeURI(dc.substring(begin + prefix.length, end)); 
    } 
};

//换肤类
var mySwitchSkiner=
{
    onItemSwitchSkin : function (item)
    {
        var cssName = item.value;
        if(cssName == null || cssName == '')
        {
            cssName = 'ext-all.css';
        }
        Ext.util.CSS.swapStyleSheet('theme', '/js/ext/resources/css/' + cssName);
        myCookie.set("myThemeCss", cssName, '30',"");
    },
    
    initSwitchSkin : function()
    {
        var cssName = myCookie.get("myThemeCss");
        //alert(myCookie.isAllowed + "->" + cssName);
        if(cssName == null || cssName == '')
        {
            cssName = 'ext-all.css';
        }
        Ext.util.CSS.swapStyleSheet('theme', '/js/ext/resources/css/' + cssName);
    }
}

//菜单类
var mySwitchSkinMenu = new Ext.menu.Menu({
                id: 'mainMenu',
                style: {
                    overflow: 'visible'
                },
                items: [{
                        id:'defalutTheme',
                        text: '默认',
                        checked: true,
                        value:'ext-all.css',
                        group: 'theme',
                        handler: mySwitchSkiner.onItemSwitchSkin
                    },{
                        id:'grayTheme',
                        text: '浅灰色',
                        value:'xtheme-gray.css',
                        checked: false,
                        group: 'theme',
                        handler: mySwitchSkiner.onItemSwitchSkin
                    }]
});

html
<%@ page language="java" pageEncoding="UTF-8"%>
<%
    String domain = request.getServerName();
    System.out.println(domain);
%>
<html>
<head>
    <title>定制个性化风格</title>
    <link rel="stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css" />
    <script type="text/javascript" src="/js/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/js/ext/ext-all.js"></script>
    <script type="text/javascript" src="/main/switchSkin.js" charset="gb2312"></script>
    
    <script type="text/javascript">
        Ext.onReady(function(){
                mySwitchSkiner.initSwitchSkin();
                //实例化一个可以改变风格样式的组件
                var pan = new Ext.Panel({
                        title:'定制个性化风格',
                        height:200,
                        width:300,
                        tbar: [   
                            {
                             text:'换肤',
                             xtype:'splitbutton',
                             width:100,
                             id:'sDepName',
                             name:'sDepName',
                             menu:mySwitchSkinMenu
                            }   
                          ]
                });
                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 23:35 HUIKK 阅读(443) 评论(0)  编辑  收藏 所属分类: EXT

只有注册用户登录后才能发表评论。
网站导航: