ExtJs切换皮肤

最新推荐文章于 2025-04-25 17:23:22 发布

leehuat

最新推荐文章于 2025-04-25 17:23:22 发布

阅读量1.6k

点赞数

分类专栏： Extjs札记文章标签： extjs function themes stylesheet css table

本文链接：https://blog.youkuaiyun.com/leehuat/article/details/6018966

版权

Extjs札记专栏收录该内容

1 篇文章

订阅专栏

<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 type="text/javascript" src="../js/ext-all.js"/> <script type="text/javascript" src="../js/ext-lang-zh_CN.js"/> <script type="text/javascript"> //当改变下拉框的选择时则调用Ext.util.CSS.swapStyleSheet来替换其样式表路径 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(){ //你的extjs的css样式 Ext.util.CSS.swapStyleSheet('theme', '../resources/css/ext/'+ this.getValue()); }); } }); Ext.reg('xthemeChange', Ext.ux.ThemeChange); Ext.onReady(function(){ var panel = new Ext.Panel({ title:'定制个性化风格', items: [new Ext.ux.ThemeChange()] , height:200, width:300 }); panel.render("panelID"); }); </script> </head> <body> <table cellspacing="5" cellpadding="5"><tr><td><div id="panelID"></div></td></tr></table> </body> </html>