在
D:\\MyEclipseWebNew\\ext\\WebContent\\MyExt\\packages\\local\\theme-spotifext\\sass\\src下定义 一些源文件，如下
注：编译时，先编译变量，在编译源文件，目的是为了使用变量，目录下内容可参照 已有主题目录
4、 界面组件的定义，可以放到
文件中，例如：
@include extjs-tab-panel-ui( $ui: 'navigation', 界面组件的名称和extjs-tab-panel-ui 组合使用 $ui-tab-background-color: transparent, 。。。。。。。。。 $ui-strip-height: 0 );
在代码中，可以使用自己定义的 样式，例如：
region: 'center', // 中间面版
xtype: 'tabpanel',
ui: 'navigation', tab_pannel 使用这个名字的样式
5、 自己定义的样式 变量，可以放在 全局的compent.scss 文件中，在自己组件样式定义
中使用这些变量 6、 总结：
（1） 定义主题、sass\\var下目录文件 和 sass\\src下目录文件，需要的全局变量
可以 定义到compent.scss文件中
（2） 在main.scss文件中定义自己的样式（使用主题中的变量，不同主题变量名字
相同，保证主题正常切换）
（3） 在代码中，定义 UI：myUIname，使用自己的样式
子定义样式例子：
7、
8、 主题调试程序须知
（1） 只要json、scss文件有变动，都需要在dos目录下中sencha app watch ，2
重新生成*.css文件
（2） 在eclipse中，需要刷新目录，重新启动server（启动时，sencha app watch
一定要退出，否则，多程序打开一个文件，会启动不成功）
22. 更换主题
http://extjs.eu/lightweight-theming/
http://blog.csdn.net/sushengmiyan/article/details/42016107
(1)项目目录下，执行
sencha generate theme theme-mygreen
sencha generate theme theme-myblue 生成样式 更改继承关系：
package.json文件，创建新的海卫一主题的变种，需要将extend行修改为： \
http://localhost:1841/?platformTags=fashion:true
使用fashion参数，可以动态调试样式，随时看到结果（原理：websocket链接服务器，当服务器端有变化时，会通知客户端刷新）
（2）改变app.json中的主题，执行sencha app watch ，编译生成*.css，注意目录
D:\\MyEclipseWebNew\\ext\\WebContent\\MyExt\\build\\development\\MyExt\\classic\\resources
（3） Copy classic 目录到theme_gray, theme_spotifext等对应目录，不同主题，对应
不同目录，如下
（4） 在程序中，添加切换代码，如下 在Ext工程中
xtype: 'combo', 下拉框
width: '100', labelWidth: '40', fieldLabel: 'Theme', displayField: 'name', valueField: 'value', //labelStyle: 'cursor:move;', //margin: '5 5 5 5',
queryMode: 'local',
store: Ext.create('Ext.data.Store', { fields: ['value', 'name'], data : [
{ value: 'theme_spotifext', name: 'my主题' }, { value: 'theme_gray', name: 'gray主题' } ] }), //value: theme,
listeners: {
select: function(combo) { var theme = combo.getValue(); // varhref =
'ext/packages/ext-theme-'+theme+'/build/resources/ext-theme-'+theme+'-all.css'; var href = 'build/development/MyExt/'+theme+'/resources/MyExt-all.css'; 不同主题对应不同的目录
var link = Ext.fly('theme'); 拿到一个dom id
if(!link) { 不存在，在首页上创建一个，
link = Ext.getHead().appendChild({ tag:'link', id:'theme', dom id rel:'stylesheet', href:'' }); };
link.set({href:Ext.String.format(href, theme)}); 为dom id 指
定 link 地址，自动刷新 }
}
老外的代码：
onThemeChange:function(combo) {
var theme = combo.getValue() ,href =
'../packages/ext-theme-neptune-{0}/build/resources/ext-theme-neptune-{0}-all.css' {} 参数
,link = Ext.fly('theme') ;
if(!link) {
link = Ext.getHead().appendChild({ tag:'link' ,id:'theme'
,rel:'stylesheet' ,href:'' }); }
if('default' !== theme) {
link.set({href:Ext.String.format(href, theme)}); {}用 theme变量替换
}
else {
link.set({href:''});如果是默认的话，设置为空 }
} // onThemeChange
（5） 图示如下
23. dafsaddsfa
24. dfa