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
??? ??? ??? ??? ??? ??? }, '->']