换颜色

1.加入颜色的样式，除了ext3要素加入这个。

<link rel="stylesheet" type="text/css" href="<%=basePath%>css/style.css" />

 

2.写入样式color.js。

Ext.ux.ThemeChange = Ext.extend(Ext.form.ComboBox, {
    editable : false,
    displayField : 'theme',
    valueField : 'css',
    typeAhead : true,
    mode : 'local',
    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
        });
        this.value = '默认';
    },
    initEvents : function() {
        this.on('collapse', function() {
            Ext.util.CSS.swapStyleSheet('theme', 'jsp/ext-3.0/css/'+ this.getValue());
        });
    }
});

Ext.reg('themeChange', Ext.ux.ThemeChange);

 

3,在用的地方加上

tbar : ['皮肤选择：', {
                            xtype : 'themeChange',
                            width : 80,
                            listWidth : 80
                        }, '->']