EXTJS 切换主题(笔记)

 

第一步:制作一个select可以选择那几个主题呢,在里边我们可以选择这几个主题,嗯,其实就是主题对应css的名称。


                
第二步:为这个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函数的时候就会乱变了。

//备注

 

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

你可能感兴趣的:(EXTJS 切换主题(笔记))