第一步:制作一个select可以选择那几个主题呢,在里边我们可以选择这几个主题,嗯,其实就是主题对应css的名称。
<select id="themeSelect">
<option value="default">default</option>
<option value="aero">aero</option>
<option value="vista">vista</option>
<option value="gray">gray</option>
</select>
第二步:为这个select添加监听change事件的函数。
Ext.get("themeSelect").on("change", function(e) {
var v = e.target.value;
if (v == 'default') {
Ext.util.CSS.swapStyleSheet("theme", "");
} else {
Ext.util.CSS.swapStyleSheet("theme", "../../resources/css/xtheme-" + e.target.value + ".css");
}
});
咱们使用的还是Ext.get()和on(),
乱云飞渡 11:38:10
每次select的值发生修改时,先把主题名传递过来,然后swap吧。你这里也看到咱们是怎么拼这个文件名的。
第三步,给html添加上个空的css标签,以备后用,这个东西现在虽然是空的,等到调用swap函数的时候就会乱变了。
<link id="theme" rel="stylesheet" type="text/css" href="" />
//备注
extjs的默认皮肤很好看,但是我们还可以变换样式切换其他皮肤.
1.直接添加其他css文件换肤.好多皮肤上网就可以收到的
如皮肤文件:gray.zip下载
把皮肤文件解压,把css文件(如gray.css)拷贝到extjs的resources目录下css文件夹里面:
2. 解压皮肤文件,把里面的相应的 image文件夹下的目录(比如gray)拷贝到extjs的resources目录下images
文件夹下
记住一定要把css文件拷到extjs的resources目录下css文件夹里面:不要拷到其他目录,这样会失真的
如果你用的是下拉列表方式显示的话可以参考下我写的代码