日期:2014-05-16  浏览次数:20362 次

EXTJS 切换主题(笔记)

?

第一步:制作一个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文件夹里面:不要拷到其他目录,这样会失真的

??? 如果你用的是下拉列表方式显示的话可以参考下我写的代码

转载之:http://www.blogjava.net/algz/articles/237386.html