梦幻之旅

DEBUG - 天道酬勤

   :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  671 随笔 :: 6 文章 :: 256 评论 :: 0 Trackbacks
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 阅读(357) 评论(0)  编辑  收藏 所属分类: EXT

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


网站导航: