Ext2 更换皮肤
如果你不需要动态换肤,推荐你使用
文件下载回来后,css及image分别放到对应的以下目录:
/ext-2.0.2/resources/images/
/ext-2.0.2/resources/css/
然后在你的页面
用Cookie更换主题?<link rel="stylesheet" type="text/css" href=""/>
其中第二个是为了换肤时使用
2.根据cookie得到上次设置的主题
?
var cookiesArr = document.cookie.split(";");
var cssName = "";
for(var i=0; i<cookiesArr.length; i++){
var arr = cookiesArr[i].split("=");
??
}
3.在设置主题事件里保存cookie，并加载新主题（此处使用combobox下来选择来触发）
?
Ext.getCmp('themeSelect').on('select', function(combo){
var name = combo.getValue();
var date=new Date();
date.setTime(date.getTime() + 30*24*3066*1000);
document.cookie="css=" + name + ";expires=" + date.toGMTString();
if(name == 'default'){
Ext.util.CSS.swapStyleSheet('theme', 'lib/ext2.2/resources/css/ext-all.css');
}else{
Ext.util.CSS.swapStyleSheet('theme', 'lib/ext2.2/resources/css/' + combo.getValue() + '.css');
}
});
?
--------------------
控件其他
http://blog.csdn.net/long0428/article/details/2612198
?
今天和大家分享一个更换皮肤的控件，但是狠是失望，因为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?? ? ? ? );??----------------?????????????????????????