Ext.ux.ThemeCycleButton换肤组件 示例 博客分类： ExtJS EXTCSSJavaScriptHTML
Ext.ux.ThemeCycleButton换肤组件 示例
效果：
创建调用HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title></title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="./mygrid.js"></script>
<style type="text/css">
</style>
<script>
Ext.onReady(function(){
new Ext.ux.ThemeCycleButton({renderTo : document.body});
});
</script>
</head>
<body>
<div id='toolbar-div'></div>
</body>
</html>
备注：
附件中提供了十二种ext皮肤。
Ext.ux.ThemeCycleButton文件中要注意其url路径（包括css和css中图片的路径）。
Ext.ux.ThemeCycleButton文件源码：
Ext.ux.ThemeCycleButton = Ext.extend(Ext.CycleButton, {
/**
* file 你的css名称
* text 下拉框的名称
* iconCls 设置图标css
*/
cssItems:[
{file: 'ext-all.css', text: 'default',checked:true, iconCls: 'icon-blue-theme'},
{file: 'xtheme-black.css', text: 'black', iconCls: 'icon-black-theme'},
{file: 'xtheme-calista.css', text: 'calista', iconCls: 'icon-calista-theme'},
{file: 'xtheme-darkgray.css', text: 'darkgray', iconCls: 'icon-darkgray-theme'},
{file: 'xtheme-gray.css', text: 'gray', iconCls: 'icon-gray-theme'},
{file: 'xtheme-green.css', text: 'green', iconCls: 'icon-green-theme'} ,
{file: 'xtheme-indigo.css', text: 'indigo', iconCls: 'icon-indigo-theme'},
{file: 'xtheme-midnight.css', text: 'midnight', iconCls: 'icon-midnight-theme'},
{file: 'xtheme-olive.css', text: 'olive', iconCls: 'icon-olive-theme'},
{file: 'xtheme-pink.css', text: 'pink', iconCls: 'icon-pink-theme'},
{file: 'xtheme-purple.css', text: 'purple', iconCls: 'icon-purple-theme'},
{file: 'xtheme-slate.css', text: 'slate', iconCls: 'icon-slate-theme'},
{file: 'xtheme-slickness.css', text: 'slickness', iconCls: 'icon-slickness-theme'}
],
themeVar:'style',
headVar: 'head',
//cssPath
cssPath:'./extjs/resources/css/',
initComponent: function() {
Ext.apply(this, {
showText: true,
prependText: ' ',
items: this.cssItems
});
if(Ext.state.Manager){
var selectedTheme = Ext.state.Manager.get(this.themeVar);
if(selectedTheme){
for(var i=0; i<this.items.length;i++){
if (this.items[i].file == selectedTheme){
this.items[i].checked = true;
// this.setActiveItem(this.items[i], true); //error ??
this.changeHandler(this, this.items[i]);
// this.changeHandler.defer(1000, this, [this, this.items[i]]);
break;
}
}
}
}
Ext.ux.ThemeCycleButton.superclass.initComponent.apply(this, arguments);
},
changeHandler: function(o, i){
if(Ext.state.Manager.getProvider()) {
Ext.state.Manager.set(this.themeVar, i.file);
Ext.state.Manager.set(this.headVar, i.head);
}
Ext.util.CSS.swapStyleSheet(this.themeVar, this.cssPath + i.file);
Ext.util.CSS.getRule('.x-panel-body', true).style.background = 'url(' + i.head + ')';
// Ext.util.CSS.updateRule('.x-panel-body', 'background', 'url(' + i.head + ')');
if(Ext.getCmp('viewport')){
Ext.getCmp('viewport').layout.center.panel.setSize(Ext.getCmp('viewport').layout.center.getSize().width + 1);
Ext.getCmp('viewport').doLayout();
Ext.getCmp('viewport').layout.center.panel.setSize(Ext.getCmp('viewport').layout.center.getSize().width - 1);
Ext.getCmp('viewport').doLayout();
}
}
});
Ext.reg('themecyclebutton', Ext.ux.ThemeCycleButton);