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