<%@ 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>