extjs 4.2 自定义主题，官方原文翻译

网上文章都不详细，自己看官方原文，**成功自定义extjs 4.2和extjs 6.2两个版本。**本文是4.2

环境&工具：

win7
已经配置了java环境（文中要求配置jre，）
官方原文
Ruby下载 我用的是2.4.4（看它长的特殊）
sencha cmd 下载 官网说用3.1以上的，下载的时候最低版就是Sencha Cmd 4.0.5 (Windows)

过程：

1、安装Ruby和Sencha Cmd
2、在随便一个目录输入一下命令，~/ext-4.2.0为自己下载或正在使用的extjs项目路径（eg：E:/ext-4.2.0），my-workspace之后生成的所有文件都会放在这里

sencha -sdk ~/ext-4.2.0 generate workspace my-workspace
cd my-workspace

3、生成App访问文件，待会可以在这里查看效果，且这个文件只放应用文件，不包含基本的资源文件

sencha -sdk ext generate app ThemeDemoApp theme-demo-app
cd theme-demo-app
sencha app build	#如果不着急看效果的话这步可以省略，如果执行了就可以看未修改的theme，
#用浏览器打开theme-demo-app下的index.html

4、生成主题包（待会要copy的第一个文件）。ext-theme-xxx这个名字可以随便取，却比较关键，最好用ext-theme-xxx的格式比较规范。

sencha generate theme ext-theme-xxx

5、更改"packages/ext-theme-xxx/package.json"

"extend": "ext-theme-classic"	
#6个中任选一个自己想继承的样子"ext-theme-base""ext-theme-neutral""ext-theme-classic""ext-theme-gray""ext-theme-access""ext-theme-neptune"

6、***新建***文件Component.scss，放置于"ext-theme-xxx/sass/var/"下，写入一下内容

$base-color: #317040 !default;	

注意：#317040为HTML颜色代码，颜色挑选地址：HTML Color Codes web page

7、最后一步：编译包：在"packages/ext-theme-xxx/"下执行下面命令

sencha package build

如何看到效果：

1、更改theme-demo-app/.sencha/app/sencha.cfg文件

app.theme=ext-theme-classic
改为:
app.theme=ext-theme-xxx

2、编译App应用文件。在theme-demo-app目录下执行

sencha ant clean	#如果你上面第三步中执行了sencha app build
sencha app build	#用浏览器打开theme-demo-app下的index.html查看效果（如果项目放在Apache项目文件下F12不报错）

提取有用的东西，放到你的项目里（有用的就这点）：

	\packages\ext-theme-xxx\build\resources	#将这个目录复制到你项目的 .../extjs/resources下，并在你自己的项目中使用该主题 

到此主体完成，追求完美的人可以继续读原文

子模式：边框可以换色。
边框的可在选择上面自定义的主题之上，同时使用该模式
创建文件"packages/ext-theme-xxx/sass/src/panel/Panel.scss"写入下面内容

@include extjs-panel-ui(
    $ui-label: 'highlight-framed',
    $ui-header-background-color: #86B404,    #这个颜色随便选
    $ui-border-color: #86B404,
    $ui-header-border-color: #86B404,
    $ui-body-border-color: #86B404,
    $ui-border-width: 5px,
    $ui-border-radius: 5px
);

看效果： 该"theme-demo-app/app/view/Main.js"的items

items: [{
    // default UI
    region: 'west',
    xtype: 'panel',
    title: 'West',
    split: true,
    width: 150
}, {
    // custom "highlight" UI
    region: 'center',
    xtype: 'panel',
    layout: 'fit',
    bodyPadding: 20,
    items: [
        {
            xtype: 'panel',
            ui: 'highlight',
            frame: true,
            bodyPadding: 10,
            title: 'Highlight Panel'
        }
    ]
}, {
    // neptune "light" UI
    region: 'east',
    xtype: 'panel',
    ui: 'light',
    title: 'East',
    split: true,
    width: 150
}]

运行

sencha app build

#等等一些看继续原文（也没多少了）

写了两个小时，同事告诉我外面下暴雨了，没带伞