extjs的默认皮肤很好看,但是我们还可以变换样式切换其他皮肤.
1.直接添加其他css文件换肤.好多皮肤上网就可以收到的
如皮肤文件:xtheme-olive.zip下载
把皮肤文件解压,把css文件(如xtheme-olive.css)拷贝到extjs的resources目录下css文件夹里面:
2. 解压皮肤文件,把里面的相应的 image文件夹下的目录(比如olive)拷贝到extjs的resources目录下images
文件夹下
记住一定要把css文件拷到extjs的resources目录下css文件夹里面:不要拷到其他目录,这样会失真的
如果你用的是下拉列表方式显示的话可以参考下我写的代码
thme.js
Ext.ux.ThemeChange = Ext.extend(Ext.form.ComboBox, {
editable : false,
displayField : 'theme',
valueField : 'css',
typeAhead : true,
mode : 'local',
triggerAction : 'all',
selectOnFocus : true,
initComponent : function() {
var themes = [
['默认', 'ext-all.css'],
['黑色', 'xtheme-black.css'],
['巧克力色', 'xtheme-chocolate.css'],
['深灰色', 'xtheme-darkgray.css'],
['浅灰色', 'xtheme-gray.css'],
['绿色', 'xtheme-green.css'],
['橄榄色', 'xtheme-olive.css'],
['椒盐色', 'xtheme-peppermint.css'],
['粉色', 'xtheme-pink.css'],
['紫色', 'xtheme-purple.css'],
['暗蓝色', 'xtheme-slate.css'],
['靛青色', 'xtheme-indigo.css'],
['深夜', 'xtheme-midnight.css'],
['银白色', 'xtheme-silverCherry.css']
];
this.store = new Ext.data.SimpleStore( {
fields : ['theme', 'css'],
data : themes
});
this.value = '默认';
},
initEvents : function() {
this.on('collapse', function() {
//Ext.Msg.alert("aa","bb");
Ext.util.CSS.swapStyleSheet('theme', 'extjs3.1/resources/css/'+ this.getValue());
});
}
});
Ext.reg('themeChange', Ext.ux.ThemeChange);
3.将这个文件引入到需要的页面中去,可以自由切换皮肤了,太爽了
分享到:
相关推荐
extjs4.2更换主题,实现各种皮肤互换。
extJs5.0红色皮肤
extjs的几个皮肤,有相应的预览图片,非常方便,可以看看是否有用
三套漂亮的ExtJS主题皮肤,有红色、橙色、红灰相间三种,大家都知道EXTJS默认的皮肤是蓝色,喜欢个性的朋友这次多了一些选择余地,放到EXT目录下就可以调用了,很不错。
超简单改变EXTJS 主题包,改变你的EXTJS项目皮肤让人眼前一亮。里面有详细说明。
完整演示包,里边有十几种皮肤已经制作成html文件演示. 方便修改....
最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵
ExtJS 主题皮肤(红、橙、红灰) 但愿大家能用的上 ExtJS 主题皮肤(红、橙、红灰) 但愿大家能用的上
extjs2.0(包含17套主题皮肤),很好用的JS框架啊,有需要的就下载吧
ExtJs 灰色皮肤
Extjs15种经典皮肤任你挑, 丢经过使用测试过了,都还不错!
ExtJS皮肤风格主题包
之前有看到网友分享的ExtJs皮肤包,很好看,但是都不全,我收藏的主题包一共有11种主题色,很全了,红色,橙色,绿色,青色,银色……,很漂亮……,现在分享出来。
ExtJS 17种 皮肤 ExtJS 17种 皮肤
3套收藏的ExtJS主题皮肤资源,可用在extjs换肤上面,红色、橙色、红灰相间三种颜色风格,在再上EXTJS默认的蓝色,实际上你现在已经拥有了4种EXTJS插件的皮肤了,
extjs实现动态树
17种适合ext2.0、2.1、2.2的主题样式,经css文件拷贝到ext-2.2.1\resources\css目录下,图片拷贝到ext-2.2.1\resources\images目录下。其换肤方法网上有大量的资料供参考
十多种extjs主题 十多种extjs主题 十多种extjs主题
24种适合ext2和3的主题样式,经css文件拷贝到ext-3.3.1\resources\css目录下,图片拷贝到ext-3.3.1\resources\images目录下。其换肤方法网上有大量的资料供参考