ExtJS 皮肤主题更换和资源(转载)
转自:http://blog.csdn.net/binyao02123202/article/details/6381457
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
- <span style= "font-size: medium;" > 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);
- </span>
- <span style="font-size: medium;"> 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);
- </span>
3.将这个文件引入到需要的页面中去,可以自由切换皮肤了,太爽了
皮肤资源下载:
http://extjs.fudini.net/themes/ext_theme_21_grey.zip
http://extjs.fudini.net/themes/ext_theme_1.zip
http://extjs.fudini.net/themes/ext_theme_2.zip
http://extjs.fudini.net/themes/ext_theme_3.zip
http://extjs.fudini.net/themes/ext_theme_4.zip
http://extjs.fudini.net/themes/ext_theme_5.zip
http://extjs.fudini.net/themes/ext_theme_6.zip
http://extjs.fudini.net/themes/ext_theme_7.zip
http://extjs.fudini.net/themes/ext_theme_8.zip
http://extjs.fudini.net/themes/ext_theme_9.zip
http://extjs.fudini.net/themes/ext_theme_10.zip
http://extjs.fudini.net/themes/ext_theme_11.zip
http://extjs.fudini.net/themes/ext_theme_12.zip
http://extjs.fudini.net/themes/ext_theme_13.zip
http://extjs.fudini.net/themes/ext_theme_14.zip
http://extjs.fudini.net/themes/ext_theme_15.zip
http://extjs.fudini.net/themes/ext_theme_16.zip
http://extjs.fudini.net/themes/ext_theme_17.zip
http://extjs.fudini.net/themes/ext_theme_18.zip
http://extjs.fudini.net/themes/ext_theme_19.zip
http://extjs.fudini.net/themes/ext_theme_20.zip
- < html >
- < head >
- < title > 定制个性化风格 </ title >
- < link rel = "stylesheet" type = "text/css" href = "resources/css/ext-all.css" >
- < script type = "text/javascript" src = "js/adapter/ext/ext-base.js" > </ script >
- < script type = "text/javascript" src = "js/ext-all.js" > </ script >
- < script type = "text/javascript" src = "js/ext-lang-zh_CN.js" > </ script >
- < script type = "text/javascript" >
- //定义使用改变个性化定制的控件
- //该控制实际上为一个可供选择样式表值的下拉框
- //当改变下拉框的选择时则调用Ext.util.CSS.swapStyleSheet来替换其样式表路径
- Ext Ext.ux.ThemeChange = Ext.extend(Ext.form.ComboBox,{
- editable : false,
- displayField : 'theme',
- valueField : 'css',
- typeAhead : true,
- mode : 'local',
- value : '默认',
- readonly : true,
- 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
- });
- },
- initEvents : function(){
- this.on('collapse', function(){
- //实际改变风格样式的处理
- Ext.util.CSS.swapStyleSheet('theme', 'resources/css/ext/'+ this.getValue());
- });
- }
- });
- Ext.reg('xthemeChange', Ext.ux.ThemeChange);
- Ext.onReady(function(){
- //实例化一个可以改变风格样式的组件
- var pan = new Ext.Panel({
- title:'定制个性化风格',
- items:new Ext.ux.ThemeChange()
- ,
- height:200,
- width:300
- });
- pan.render("hr_panel");
- });
- </ script >
- </ head >
- < body >
- < table cellspacing = "5" cellpadding = "5" > < tr > < td > < div id = "hr_panel" > </ div > </ td > </tr > </ table >
- </ body >
- </ html >