浏览 8321 次
|
锁定老帖子 主题：ExtJs控制之更换皮肤
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-07-21
今天和大家分享一个更换皮肤的控件，但是狠是失望，因为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
);
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-03-14
我想请问一下 iframe 下更换皮肤的问题， 你具体是怎么是实现的？？？
|
| 返回顶楼 | |
