今天和大家分享一個更換皮膚的控件，但是狠是失望，因爲ext官方提供的css很粗糙，最好讓美工加以修改，不說了，代碼如下.
Ext.ux.ThemeCycleButton = Ext.extend(Ext.CycleButton, {
/**
* file 你的css名稱
* text 下拉框的名稱
* iconCls 設置圖標css
*/
cssItems:[
{file: 'ext-all.css', text: '藍色月影 ',checked:true, iconCls: 'icon-blue-theme'},
{file: 'xtheme-gray.css', text: '灰色回憶 ', iconCls: 'icon-gray-theme'},
{file: 'xtheme-slate.css', text: '深藍心情 ', iconCls: 'icon-blue-theme'},
{file: 'xtheme-black.css', text: '黑色物語 ', iconCls: 'icon-blue-theme'},
{file: 'xtheme-olive.css', text: '綠色芳香 ', iconCls: 'icon-blue-theme'},
{file: 'xtheme-purple.css', text: '誘惑紫色 ', iconCls: 'icon-blue-theme'}
],
themeVar:'style',
headVar: 'head',
//cssPath是你放css的位置，這個路徑要是弄錯了，神仙也出不來的
cssPath:'js/ext2/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);
例子如下:
var tb=new Ext.Toolbar('toolbar-div');//創建一個工具條
tb.add(
' ',
' ',
' ',
'<b>sam.zhang<b>',
' ',
' ',
'2008-11-10 11:20 ',
' ',
' ',
'這是第35次登陸系統',
'->',
' ',
'',
'->',
new Ext.Toolbar.Button({
text: 'WEbQQ',
handler: function(){
alert("正在啓動webQQ,請稍候...");
}
}),
'-',
new Ext.Toolbar.Button({
text: '更改密碼',
handler: function(){
alert("你沒有權限更改密碼.");
}
}),
'-',
new Ext.Toolbar.Button({
text: '註銷',
handler: function(){
window.location='ask123_logout';
}
}),
'-',
//...調用控件對象就可以了，easy吧？
new Ext.ux.ThemeCycleButton
);