home Glamenv-Septzen(ぐらめぬ・ぜぷつぇん)(archive)

JavaScript/ExtJS/ExtJS4 + Sencha Cmd 勉強メモ2, テーマ(Theme)のカスタマイズ

作成日: 2014-06-01 21:54:59   /   last updated at: 2014-06-08 20:13:39
カテゴリ: ExtJS JavaScript 

ExtJS4.2以降、Sencha Cmdの導入に伴い、"package"の一種類として Theme を用意する方式になりました。
JavaScript/ExtJS/ExtJS4 + Sencha Cmd 勉強メモ1 と同じ環境で、続けてThemeについて練習してみます。

今回の実験環境： 

Ubuntu 12.04 LTS (64bit)
ext-4.2.1.883 (GPL版)
Sencha Cmd v4.0.4.84
Ruby (rbenvにて ruby 2.0.0p481 をインストール済み)

/work/www 以下をDocumentRootとしてApacheHTTPDで公開
/work/www/ext-4.2.1.883 にExtJSを展開済み
/work/devtools 以下にSencha Cmdをインストール

Webブラウザによる動作確認：Firefox 29 on Win7 Pro 日本語版

JavaScript/ExtJS/ExtJS4 + Sencha Cmd 勉強メモ1 の続きですので、 "/work/www/extjs-tests/t1" を "${app.dir}" として参照します。

サンプルコード : https://github.com/msakamoto-sf/extjs42-senchacmdv4-exercise

カスタムテーマを作成してみる (sencha generate theme)

まず、"sencha generate theme" コマンドでカスタムテーマを作成してみます。 

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ sencha generate theme my-custom-theme
Sencha Cmd v4.0.4.84
[INF]
[INF] init-plugin:
[INF]
[INF] cmd-root-plugin.init-properties:
[INF]
[INF] init-properties:
[INF]
[INF] init-sencha-command:
[INF]
[INF] init:
[INF]
[INF] generate-theme-impl:
[INF]
[INF] init-plugin:
[INF]
[INF] init-package-plugin:
[INF]
[INF] generate-package:
[INF]      [echo] Generating package my-custom-theme of type theme to /work/www/extjs-tests/t1/packages/my-custom-theme
[INF] [x-property-file] Updating property file: /work/www/extjs-tests/t1/packages/my-custom-theme/.sencha/package/sencha.cfg
[INF]
[INF] -after-generate-package:
[INF] [x-property-file] Updating property file: /work/www/extjs-tests/t1/packages/my-custom-theme/.sencha/package/sencha.cfg
[INF]
[INF] generate-theme:

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ git stat
# On branch master
# Untracked files:
#   (use "git add <file>..." to include in what will be committed)
#
#       packages/
nothing added to commit but untracked files present (use "git add" to track)

"${app.dir}/packages" ディレクトリにテーマ用のソースツリーが生成されました。
生成された直後の段階で一旦git commitしておきます。こうしておくことで、以降の修正やビルドコマンドで何が変化したのかが明確になります。 

$ git add .
$ git commit -m 'create my-custom-theme'

生成された直後のテーマのソースツリーを覗いてみる。

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ tree -a packages
packages
└── my-custom-theme
    ├── build.xml
    ├── docs
    │   ├── package.png
    │   └── screenshots
    │       └── screenshot-1.png
    ├── examples
    │   └── Readme.md
    ├── licenses
    │   └── Readme.md
    ├── overrides
    │   └── Readme.md
    ├── package.json
    ├── Readme.md
    ├── resources
    │   └── Readme.md
    ├── sass
    │   ├── config.rb
    │   ├── etc
    │   │   ├── all.scss
    │   │   └── Readme.md
    │   ├── example
    │   │   ├── custom.js
    │   │   ├── render.js
    │   │   └── theme.html
    │   ├── Readme.md
    │   ├── src
    │   │   └── Readme.md
    │   └── var
    │       └── Readme.md
    ├── .sencha
    │   └── package
    │       ├── build-impl.xml
    │       ├── build.properties
    │       ├── codegen.json
    │       ├── defaults.properties
    │       ├── find-cmd-impl.xml
    │       ├── init-impl.xml
    │       ├── js-impl.xml
    │       ├── plugin.xml
    │       ├── resources-impl.xml
    │       ├── sass-impl.xml
    │       ├── sencha.cfg
    │       ├── slice-impl.xml
    │       ├── sub-builds.xml
    │       └── testing.properties
    └── src
        └── Readme.md

15 directories, 33 files

今回の記事で関連してくるポイントに絞って紹介します。いずれも開発者による編集がOKなファイル・ディレクトリです。

${app.dir}/packages/my-custom-theme 以下 解説
package.json パッケージのメタ情報が定義されているJSONファイル。
.sencha/package/sencha.cfg SASSの設定など、テーマのビルドで必要なSencha Cmdが参照する設定ファイル。
sass/var/ SASSの変数を定義するディレクトリ。
sass/src/ SASSのルールとUI mixinを定義するディレクトリ。
"sass/var/" で定義した変数を参照できる。
sass/etc/ ユーティリティ的な関数やmixinを定義するディレクトリ。

ポイント：

  • ExtJSが提供しているテーマのうち、どれをベースとしているのかを、package.json の "extend" で指定しています。
    • 今回の生成例では、"ext-theme-classic" になってました。
  • "sass/var/", "sass/src/" の下に"scss"ファイルを配置する。この時、Extコンポーネントのクラス名から "Ext." を外した文字列を、ファイル・ディレクトリ階層を一致させる。
    • 例1："Ext.Component" でコンポーネント全体のグローバル変数をカスタマイズしたい場合は、"Ext."を外して、 "sass/var/Component.scss" で定義する。
    • 例2："Ext.panel.Panel" のSASS変数をカスタマイズしたい場合は、"Ext."を外した "panel.Panel" に対応する "sass/var/panel/Panel.scss" で定義する。
  • つまり、"sass/var/", "sass/src/" の名前空間は "Ext" になっている。これは、".sencha/package/sencha.cfg" の "package.sass.namespace=Ext" という設定による。
    • 名前空間をExtから解放して、フルパス指定にしたければ、"package.sass.namespace=" という空の値を設定する。これにより、"sass/var/Ext/panel/Panel.scss" というファイル名の命名規約になる。

このうち、生成直後は "sass/var/", "sass/src/" はReadme.mdが入っているだけの空っぽのディレクトリです。 "sass/etc/all.scss" がありますが、これは生成直後は0バイトの空っぽのファイルです。
そのため、"package.json" と ".sencha/package/sencha.cfg" だけ中身を見てみます。

なお、GlobalなSASS変数をComponent.scssに記述するというのは、以下の画像の赤枠囲みのように、ExtJSの"Global_CSS"のドキュメントからも確認できます。

"sencha generate theme" で生成直後の "package.json"

パッケージのメタ情報が記載されています。必要に応じて適当な内容に修正します。 

{
    "name": "my-custom-theme",
    "type": "theme",
    "creator": "anonymous",
    "summary": "Short summary",
    "detailedDescription": "Long description of package",
    "version": "1.0.0",
    "compatVersion": "1.0.0",
    "format": "1",
    "local": true,
    "requires": [],
    "extend": "ext-theme-classic"
}
"sencha generate theme" で生成直後の ".sencha/package/sencha.cfg"

色々、ソースディレクトリや出力ディレクトリを指定しているのが分かります。コメントである程度解説も書かれています。 

# The name of the package - should match the "name" property in ./package.json
#
package.name=my-custom-theme

# The namespace to which this package's SASS corresponds. The default value of
# "Ext" means that the files in ./sass/src (and ./sass/var) match classes in
# the Ext" root namespace. In other words, "Ext.panel.Panel" maps to
# ./sass/src/panel/Panel.scss.
#
# To style classes from any namespace, set this to blank. If this is blank,
# then to style "Ext.panel.Panel" you would put SASS in
# ./sass/src/Ext/panel/Panel.scss.
#
package.sass.namespace=Ext

# This is the comma-separated list of folders where classes reside. These
# classes must be explicitly required to be included in the build.
#
package.classpath=${package.dir}/src

# This is the comma-separated list of folders of overrides. All files in this
# path will be given a tag of "packageOverrides" which is automatically
# required in generated apps by the presence of this line in app.js:
#
#   //@require @packageOverrides
#
package.overrides=${package.dir}/overrides

# This is the folder where SASS "src" resides. This is searched for SCSS
# files that match the JavaScript classes used by the application.
#
package.sass.srcpath=${package.dir}/sass/src

# This is the folder where SASS "vars" resides. This is searched for SCSS
# files that match the JavaScript classes used by the application.
#
package.sass.varpath=${package.dir}/sass/var

# This file is automatically imported into the SASS build before "vars".
#
package.sass.etcpath=${package.dir}/sass/etc/all.scss

# This is the folder in which to place "sencha packaage build" output.
#
package.build.dir=${package.dir}/build

# The folder that contains example application(s) for this package.
#
package.examples.dir=${package.dir}/examples

# The folder that contains sub-packages of this package. Only valid for "framework"
# package type.
#
package.subpkgs.dir=${package.dir}/packages

#==============================================================================
# Custom Properties - Place customizations below this line to avoid merge
# conflicts with newer versions

package.cmd.version=4.0.4.84

package.framework=ext

★★重要★★ : "Package" と "Theme" のコンセプトについて

"Theme" を作成したら、"packages" の下にソースツリーが生成されました。
これは、Sencha Cmdにおいて、アプリケーションを拡張するために "Package" という考え方が導入され、テーマによるCSSや画像アセットは "Package" の一形態として扱われるようになったためのようです。
後述しますが、"Theme"が制御するスコープは基本的にはExtコンポーネント全体になります。
Extコンポーネント全体の見栄えを制御する「テーマ」をpackageとしてまとめることで、テーマ単体で他のアプリと共有したり、マーケットプレイスで公開することが可能となります。

この点は、"sencha generate workspace"によりworkspaceの単位で開発を始めるとより明確になります。詳しくはExtJSのドキュメントで、"Components" の "Theming" を参照して下さい。

一方で、そのアプリケーション固有でテーマを微調整したい、というケースもあります。その場合には、packageとしてのテーマではなく、アプリの "${app.dir}/sass/(src|var)" で調整することが可能です。

練習1: ベースとなるテーマを変更してみる

"my-custom-theme"は、生成直後はpackage.jsonで "ext-theme-classic" をベースとしています。これを、試しに、"ext-theme-neptune" をベースとしたものに変更してみます。

"${app.dir}/packages/my-custom-theme/package.json" の 

"extend": "ext-theme-classic"

を 

"extend": "ext-theme-neptune"

に修正します。

この後、"sencha app refresh" を実行します。これにより、開発用の "${app.dir}/bootstrap.js" が更新されます。
・・・が・・・ 

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ sencha app refresh

(...)

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ git stat
# On branch master
# Changes not staged for commit:
#   (use "git add <file>..." to update what will be committed)
#   (use "git checkout -- <file>..." to discard changes in working directory)
#
#       modified:   bootstrap.js
#       modified:   packages/my-custom-theme/package.json
#
no changes added to commit (use "git add" and/or "git commit -a")


msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ git diff
diff --git a/bootstrap.js b/bootstrap.js
index 7bbaae2..d1b28ba 100644
--- a/bootstrap.js
+++ b/bootstrap.js
@@ -412,7 +412,6 @@ Ext.ClassManager.addNameAlternateMappings({
   ],
   "Ext.grid.RowEditor": [],
   "Ext.grid.RowEditorButtons": [],
-  "Ext.grid.Scroller": [],
   "Ext.grid.View": [],
   "Ext.grid.ViewDropZone": [],
   "Ext.grid.column.Action": [
@@ -1270,7 +1269,6 @@ Ext.ClassManager.addNameAliasMappings({
   "Ext.grid.RowEditorButtons": [
     "widget.roweditorbuttons"
   ],
-  "Ext.grid.Scroller": [],
   "Ext.grid.View": [
     "widget.gridview"
   ],
diff --git a/packages/my-custom-theme/package.json b/packages/my-custom-theme/package.json
index 0c10f6d..6fb5440 100644
--- a/packages/my-custom-theme/package.json
+++ b/packages/my-custom-theme/package.json
@@ -9,5 +9,5 @@
     "format": "1",
     "local": true,
     "requires": [],
-    "extend": "ext-theme-classic"
+    "extend": "ext-theme-neptune"
 }

bootstrap.jsについて、単に "Ext.grid.Scroller" が削られただけで、今の時点では大きな変化はありませんでした。(index.htmlで ext-all-dev.js を使うようになったのが影響してるか？)

練習2: グローバルな変数、$base-color を変更してみる

グローバルな変数、$base-colorを変更してみます。
"sass/var/" の下に、Global_CSSのドキュメントにあるように "Component.scss" ファイルを作成し、以下の一行を定義します。この辺りの流れは、ExtJSドキュメントの"Components" -> "Theming" を参考にしてます。
また、個人的にはExtJSのデフォルトのフォントサイズはやや小さめな気がしてますので、16pxにしてみます。$font-size グローバル変数を追加します。
"${app.dir}/packages/my-custom-theme/sass/var/Component.scss": 

$base-color: #317040 !default;
$font-size: 16px !default;
"sencha package build" でビルドしてみる

この段階で、一度ビルドしてみます。 "${app.dir}/packages/my-custom-theme/" に移動して、"sencha package build" コマンドを実行します。
（※なお、今回は例としてパッケージだけのビルドを行っていますが、後半でExt.panel.PanelのCSS変数のカスタマイズではいきなり "sencha app build" で一気にパッケージのビルドもじっこうしてます） 

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ cd packages/my-custom-theme/
msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1/packages/my-custom-theme$ sencha package build
Sencha Cmd v4.0.4.84
[INF]
[INF] init-plugin:
[INF]
[INF] init-package-plugin:
[INF]
[INF] package-build:
[INF]
[INF] -before-init-local:
[INF]
[INF] -init-local:
[INF]
[INF] -after-init-local:
[INF]
[INF] init-local:
[INF]
[INF] find-cmd-in-path:
[INF]
[INF] find-cmd-in-environment:
[INF]
[INF] find-cmd-in-shell:
[INF]
[INF] init-cmd:
[INF]      [echo] Using Sencha Cmd from /work/devtools/Sencha/Cmd/4.0.4.84 for /work/www/extjs-tests/t1/packages/my-custom-theme/build.xml
[INF]
[INF] -before-init:
[INF]
[INF] -init:
[INF]
[INF] apply-version:
[INF] Initializing Sencha Cmd ant environment
[INF] Adding antlib taskdef for com/sencha/command/compass/ant/antlib.xml
[WRN] Specified property file /work/www/extjs-tests/t1/packages/my-custom-theme/.sencha/package/production.properties does not exist
[INF]
[INF] -after-init:
[INF]
[INF] -before-init-defaults:
[INF]
[INF] -init-defaults:
[INF]
[INF] -after-init-defaults:
[INF]
[INF] init:
[INF]
[INF] -before-build:
[INF]
[INF] js:
[INF]
[INF] -before-js:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -init-compile-js:
[INF]
[INF] -compile-js-debug:
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-base/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-base/overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neutral/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neutral/overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neptune/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neptune/overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/packages/my-custom-theme/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/packages/my-custom-theme/overrides
[INF] Concatenating output to file /work/www/extjs-tests/t1/packages/my-custom-theme/build/my-custom-theme-debug.js
[INF]
[INF] -compile-js-non-debug:
[INF] Compressing data with YuiJavascriptCompressor
[INF] Concatenating output to file /work/www/extjs-tests/t1/packages/my-custom-theme/build/my-custom-theme.js
[INF]
[INF] -js:
[INF]
[INF] -after-js:
[INF]
[INF] inherit-resources:
[INF]
[INF] -before-inherit-resources:
[INF]
[INF] -inherit-resources:
[INF]      [echo] Merging resources from base package /work/www/extjs-tests/t1/ext/packages/ext-theme-base
[INF]      [copy] Copying 1 file to /work/www/extjs-tests/t1/packages/my-custom-theme/build/resources
[INF]      [echo] Merging resources from base package /work/www/extjs-tests/t1/ext/packages/ext-theme-neutral
[INF]      [copy] Copying 1 file to /work/www/extjs-tests/t1/packages/my-custom-theme/build/resources
[INF]      [echo] Merging resources from base package /work/www/extjs-tests/t1/ext/packages/ext-theme-neptune
[INF]      [copy] Copying 179 files to /work/www/extjs-tests/t1/packages/my-custom-theme/build/resources
[INF]
[INF] -after-inherit-resources:
[INF]
[INF] copy-resources:
[INF]
[INF] -before-copy-resources:
[INF]
[INF] -copy-resources:
[INF]      [echo] Merging resources from current package /work/www/extjs-tests/t1/packages/my-custom-theme/resources
[INF]      [copy] Copying 1 file to /work/www/extjs-tests/t1/packages/my-custom-theme/build/resources
[INF]
[INF] -after-copy-resources:
[INF]
[INF] sass:
[INF]
[INF] -before-sass:
[INF]
[INF] -init-sass-compiler:
[INF]
[INF] -compile-sass-rtl:
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-base/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-base/overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neutral/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neutral/overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neptune/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neptune/overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/packages/my-custom-theme/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/packages/my-custom-theme/overrides
[INF] writing sass content to /work/www/extjs-tests/t1/packages/my-custom-theme/build/my-custom-theme-all-rtl-debug.scss
[INF] writing sass content to /work/www/extjs-tests/t1/packages/my-custom-theme/build/config.rb
[INF]
[INF] -compile-sass-ltr:
[INF] writing sass content to /work/www/extjs-tests/t1/packages/my-custom-theme/build/my-custom-theme-all-debug.scss
[INF]
[INF] -compile-sass:
[INF]
[INF] -compass-compile:
[INF] executing compass using system installed ruby runtime
   create resources/my-custom-theme-all-debug.css
   create resources/my-custom-theme-all-rtl-debug.css
[INF]
[INF] -compile-css:
[INF] srcfile: /work/www/extjs-tests/t1/packages/my-custom-theme/build/resources/my-custom-theme-all-debug.css (720509 bytes)
[INF] outfile: /work/www/extjs-tests/t1/packages/my-custom-theme/build/resources/my-custom-theme-all.css
[INF] Compressed size 318231 bytes. Saved 402278 bytes (55 %)
[INF] srcfile: /work/www/extjs-tests/t1/packages/my-custom-theme/build/resources/my-custom-theme-all-rtl-debug.css (737657 bytes)
[INF] outfile: /work/www/extjs-tests/t1/packages/my-custom-theme/build/resources/my-custom-theme-all-rtl.css
[INF] Compressed size 324254 bytes. Saved 413403 bytes (56 %)
[INF]
[INF] -sass:
[INF]
[INF] -after-sass:
[INF]
[INF] slice:
[INF]
[INF] -before-slice:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -generate-slicer-bootstrap:
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-base/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-base/overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neutral/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neutral/overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neptune/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neptune/overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/packages/my-custom-theme/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/packages/my-custom-theme/overrides
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/packages/my-custom-theme/sass/example/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/packages/my-custom-theme/sass/example/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/packages/my-custom-theme/sass/example/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/packages/my-custom-theme/sass/example/bootstrap.js
[INF]
[INF] -update-slicer-css:
[INF]
[INF] -capture-theme-image:
[INF]      [echo] Capture theme image to /work/www/extjs-tests/t1/packages/my-custom-theme/build/theme-capture.png
[INF] Capturing theme image
[INF] loading page /work/www/extjs-tests/t1/packages/my-custom-theme/sass/example/theme.html
Capturing screenshot
Saving slicer widget manifest
Capture complete

[INF] Capture complete
[INF]
[INF] -slice-theme-images:
[INF]      [echo] Slicing theme images to /work/www/extjs-tests/t1/packages/my-custom-theme/build/resources
[INF] Slicing images...
[INF] Slicing complete - generated 0 images
[INF]
[INF] -slice:
[INF]
[INF] -after-slice:
[INF]
[INF] subpkgs:
[INF]
[INF] examples:
[INF]
[INF] -before-examples:
[INF]
[INF] -examples:
[INF]
[INF] -after-examples:
[INF]
[INF] pkg:
[INF]
[INF] -before-pkg:
[INF]
[INF] -pkg:
[INF] Package will not be signed: local repo is anonymous
[INF]       [zip] Building zip: /work/www/extjs-tests/t1/build/my-custom-theme/my-custom-theme.pkg
[INF] [x-make-pkg] Package is not signed
[INF]
[INF] -after-pkg:
[INF]
[INF] -build:
[INF]
[INF] -after-build:
[INF]
[INF] build:

この段階で、どんな変更があったか見てみます。 

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1/packages/my-custom-theme$ cd ../..

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ git status
# On branch master
# Changes not staged for commit:
#   (use "git add <file>..." to update what will be committed)
#   (use "git checkout -- <file>..." to discard changes in working directory)
#
#       modified:   packages/my-custom-theme/package.json
#
# Untracked files:
#   (use "git add <file>..." to include in what will be committed)
#
#       build/my-custom-theme/
#       packages/my-custom-theme/build/
#       packages/my-custom-theme/sass/example/bootstrap.js
#       packages/my-custom-theme/sass/example/example.css
#       packages/my-custom-theme/sass/var/Component.scss
no changes added to commit (use "git add" and/or "git commit -a")

まず、"build/(package名)/" の下には、"my-custome-theme.pkg" という名前でzipファイルが生成されています。 

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ tree build/my-custom-theme/
build/my-custom-theme/
└── my-custom-theme.pkg

0 directories, 1 file

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ file build/my-custom-theme/my-custom-theme.pkg
build/my-custom-theme/my-custom-theme.pkg: Zip archive data, at least v1.0 to extract

"packages/(package名)/build/" の下には、パッケージングされる前のビルド成果物が生成されています。 

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ tree packages/my-custom-theme/build/
packages/my-custom-theme/build/
├── config.rb
├── my-custom-theme-all-debug.scss
├── my-custom-theme-all-rtl-debug.scss
├── my-custom-theme-debug.js
├── my-custom-theme.js
├── resources
│   ├── images
│   │   ├── button
          (... "ext-4.2.1.883/resources/ext-theme-neptune/images" 以下から画像がコピーされていた)
│   │   └── util
│   │       └── splitter
│   │           ├── mini-bottom.png
│   │           ├── mini-left.png
│   │           ├── mini-right.png
│   │           └── mini-top.png
│   ├── my-custom-theme-all.css
│   ├── my-custom-theme-all-debug.css
│   ├── my-custom-theme-all-rtl.css
│   ├── my-custom-theme-all-rtl-debug.css
│   └── Readme.md
├── .sass-cache
│   ├── 00aa2521e5860d81b4dcfebe199828d56f79ee2f
     (... Extコンポーネント毎のscssファイルがキャッシュされている？)
│   └── ff54d586624bc15a274bd3ae3b187302047e49a1
│       ├── Header.scssc
│       ├── Panel.scssc
│       ├── Table.scssc
│       └── Tool.scssc
├── temp
│   └── package.json
├── theme-capture.json
└── theme-capture.png

22 directories, 191 files

ポイント：

  • packages/my-custom-theme/build/resources/ の下に、実際に使われるCSSや画像ファイルが生成された。
  • my-custom-theme-all.css には "-debug" や "-rtl", "-rtl-debug" がついたバリエーションがある。ext/以下と同様、無印が最適化されたCSSで、"-debug" 付きは人間が読めるCSSになっている。
"build/.sass-cache/" と "build/temp/" を .gitignoreに追加する

"${app.dir}/packages/my-custom-theme/.gitignore" : 以下の内容で追加 

build/.sass-cache/
build/temp/

→ 

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ git add packages/my-custom-theme/.gitignore

ここまで出来た段階で、一旦git commitします。 

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ git add .
msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ git commit -m 'build my-custom-theme 1st time.'
アプリから使ってみる : production環境でのビルド

では、ビルドしたテーマをアプリから使ってみます。アプリの "sencha.cfg" で "app.theme" の設定値を今回作成した "my-custom-theme" に変更して、ビルドしなおしてみます。
"${app.dir}/.sencha/app/sencha.cfg" : 

...
app.theme=ext-theme-classic
→
app.theme=my-custom-theme
...

念のため "sencha app refresh" した後、"sencha ant clean" で一旦ビルド内容をクリアして、"sencha app build" してみます。 

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ sencha app build
Sencha Cmd v4.0.4.84
[INF]
[INF] init-plugin:
[INF]
[INF] cmd-root-plugin.init-properties:
[INF]
[INF] init-properties:
[INF]
[INF] init-sencha-command:
[INF]
[INF] init:
[INF]
[INF] app-build-impl:
[INF]
[INF] -before-init-local:
[INF]
[INF] -init-local:
[INF]
[INF] -after-init-local:
[INF]
[INF] init-local:
[INF]
[INF] find-cmd-in-path:
[INF]
[INF] find-cmd-in-environment:
[INF]
[INF] find-cmd-in-shell:
[INF]
[INF] init-cmd:
[INF]      [echo] Using Sencha Cmd from /work/devtools/Sencha/Cmd/4.0.4.84 for /work/www/extjs-tests/t1/build.xml
[INF]
[INF] -before-init:
[INF]
[INF] -init:
[INF] Initializing Sencha Cmd ant environment
[INF] Adding antlib taskdef for com/sencha/command/compass/ant/antlib.xml
[INF]
[INF] -after-init:
[INF]
[INF] -before-init-defaults:
[INF]
[INF] -init-defaults:
[INF]
[INF] -after-init-defaults:
[INF]
[INF] -init-compiler:
[INF]
[INF] init:
[INF]
[INF] -before-build:
[INF]
[INF] refresh:
[INF]
[INF] -before-refresh:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -detect-app-build-properties:
[INF] Loading app json manifest...
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-base/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-base/overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neutral/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neutral/overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neptune/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neptune/overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/packages/my-custom-theme/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/packages/my-custom-theme/overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/app
[INF] Loading classpath entry /work/www/extjs-tests/t1/app.js
[INF] Loading classpath entry /work/www/extjs-tests/t1/build/temp/production/MyApp/sencha-compiler/app
[WRN] C1000: Rhino Parse Warning (Trailing comma is not legal in an ECMA-262 object initializer =>     },{) -- /work/www/extjs-tests/t1/app/view/Main.js:25:5
[INF] Loading classpath entry /work/www/extjs-tests/t1/build/temp/production/MyApp/sencha-compiler/app
[INF] Concatenating output to file /work/www/extjs-tests/t1/build/temp/production/MyApp/sencha-compiler/cmd-packages.js
[INF] Adding external reference : @full-page => @overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/build/temp/production/MyApp/sencha-compiler/cmd-packages.js
[INF] Adding external reference : Ext.util.Observable => /work/www/extjs-tests/t1/build/temp/production/MyApp/sencha-compiler/cmd-packages.js
[INF]
[INF] -refresh-app:
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/bootstrap.js
[INF] Appending content to /work/www/extjs-tests/t1/bootstrap.js
[INF] Appending content to /work/www/extjs-tests/t1/bootstrap.json
[INF]
[INF] -refresh:
[INF]
[INF] -after-refresh:
[INF]
[INF] resolve:
[INF]
[INF] js:
[INF]
[INF] -before-js:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -detect-app-build-properties:
[INF]
[INF] -compile-js:
[INF] Loading classpath entry /work/devtools/Sencha/Cmd/4.0.4.84/plugins/src
[INF] Loading classpath entry /work/devtools/Sencha/Cmd/4.0.4.84/plugins/ext/src
[INF] Loading classpath entry /work/devtools/Sencha/Cmd/4.0.4.84/plugins/ext/4.2/src
[INF] Building optimized concatenated output..
[INF] Compressing data with YuiJavascriptCompressor
[INF] Concatenating output to file /work/www/extjs-tests/t1/build/production/MyApp/app.js
[INF]
[INF] -js:
[INF]
[INF] -after-js:
[INF]
[INF] resources:
[INF]
[INF] -before-resources:
[INF]
[INF] -before-inherit-resources:
[INF]
[INF] -before-copy-resources:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -resources:
[INF] merging resources into /work/www/extjs-tests/t1/build/production/MyApp/resources
[INF] merged 179 resources into /work/www/extjs-tests/t1/build/production/MyApp/resources
[INF] merging resources into /work/www/extjs-tests/t1/build/production/MyApp
[INF] merged 0 resources into /work/www/extjs-tests/t1/build/production/MyApp
[INF]
[INF] -after-copy-resources:
[INF]
[INF] -after-inherit-resources:
[INF]
[INF] -after-resources:
[INF]
[INF] sass:
[INF]
[INF] -before-sass:
[INF]
[INF] -compass-compile-theme-package:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -compile-sass:
[INF] writing sass content to /work/www/extjs-tests/t1/build/temp/production/MyApp/sass/MyApp-all.scss
[INF] appending sass content to /work/www/extjs-tests/t1/build/temp/production/MyApp/sass/MyApp-all.scss
[INF] appending sass content to /work/www/extjs-tests/t1/build/temp/production/MyApp/sass/MyApp-all.scss
[INF] writing sass content to /work/www/extjs-tests/t1/build/temp/production/MyApp/sass/config.rb
[INF] executing compass using system installed ruby runtime
   create MyApp-all.css
[INF]      [echo] Compressing /work/www/extjs-tests/t1/build/production/MyApp/resources/MyApp-all.css to /work/www/extjs-tests/t1/build/production/MyApp/resours
[INF] srcfile: /work/www/extjs-tests/t1/build/production/MyApp/resources/MyApp-all.css (633282 bytes)
[INF] outfile: /work/www/extjs-tests/t1/build/production/MyApp/resources/MyApp-all.css
[INF] Compressed size 278417 bytes. Saved 354865 bytes (56 %)
[INF]
[INF] -compass-compile-theme-folders:
[INF]
[INF] -compass-compile-sass-dir:
[INF]
[INF] -compass-compile:
[INF]
[INF] -sass:
[INF]
[INF] -after-sass:
[INF]
[INF] slice:
[INF]
[INF] -before-slice:
[INF]
[INF] -slice-images:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -detect-app-build-properties:
[INF]
[INF] -slice-app-theme:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -compile-slicer-sass:
[INF] writing sass content to /work/www/extjs-tests/t1/build/temp/production/MyApp/slicer-temp/MyApp-example.scss
[INF] writing sass content to /work/www/extjs-tests/t1/build/temp/production/MyApp/slicer-temp/config.rb
[INF]
[INF] -compass-compile-slicer-css:
[INF] executing compass using system installed ruby runtime
   create MyApp-example.css
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/sass/example/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/sass/example/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/sass/example/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/sass/example/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/sass/example/bootstrap.js
[INF]      [echo] Capture theme image to /work/www/extjs-tests/t1/build/temp/production/MyApp/slicer-temp/theme-capture.png
[INF] Capturing theme image
[INF] loading page /work/www/extjs-tests/t1/sass/example/theme.html
Capturing screenshot
Saving slicer widget manifest
Capture complete

[INF] Capture complete
[INF]      [echo] Slicing theme images to /work/www/extjs-tests/t1/build/production/MyApp/resources
[INF] Slicing images...
[INF] Slicing complete - generated 193 images
[INF]
[INF] -slice:
[INF]
[INF] -after-slice:
[INF]
[INF] page:
[INF]
[INF] -before-page:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -copy-app-resources:
[INF]
[INF] -generate-deltas:
[INF]
[INF] -detect-app-build-properties:
[INF]
[INF] -build-standalone-json-manifest:
[INF]
[INF] -build-output-page:
[INF]
[INF] -build-output-markup-page:
[INF] Building output markup to /work/www/extjs-tests/t1/build/production/MyApp/index.html
[INF]
[INF] -generate-cache-manifest:
[INF]
[INF] -page:
[INF]
[INF] -after-page:
[INF]
[INF] native-package:
[INF]
[INF] -build:
[INF]
[INF] -after-build:
[INF]
[INF] build:
[INF]
[INF] app-build:

差分を見てみます。 

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ git status
# On branch master
# Changes not staged for commit:
#   (use "git add/rm <file>..." to update what will be committed)
#   (use "git checkout -- <file>..." to discard changes in working directory)
#
#       modified:   .sencha/app/sencha.cfg
#       modified:   bootstrap.css
#       modified:   bootstrap.js
#       modified:   build/production/MyApp/app.js
#       modified:   build/production/MyApp/resources/MyApp-all.css
#       modified:   build/production/MyApp/resources/Readme.md
#       deleted:    build/production/MyApp/resources/images/boundlist/trigger-arrow.png
       (... この辺は、画像ファイルの変更・削除になります)
#       modified:   build/production/MyApp/resources/images/window/window-default-sides.gif
#       modified:   sass/example/bootstrap.js
#       modified:   sass/example/example.css
#
# Untracked files:
#   (use "git add <file>..." to include in what will be committed)
#
#       build/production/MyApp/resources/images/btn/btn-default-toolbar-large-bg.gif
       (... この辺は、画像ファイルの追加になります)
#       build/production/MyApp/resources/images/util/splitter/mini-right.png
#       build/production/MyApp/resources/images/util/splitter/mini-top.png
no changes added to commit (use "git add" and/or "git commit -a")

差分抜粋：boostrap.css : これは、直前にビルドしたのはtesting環境だったため、production環境に更新されただけ。 

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ git diff bootstrap.css
diff --git a/bootstrap.css b/bootstrap.css
index 3837424..5d9ec26 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -5,5 +5,5 @@
  * to the most recently built CSS file for the application to allow index.html
  * in the development directory to load properly (i.e., "dev mode").
  */
-@import 'build/testing/MyApp/resources/MyApp-all.css';
+@import 'build/production/MyApp/resources/MyApp-all.css';

差分抜粋：boostrap.js : neptuneテーマに関連した定義が変更・追加されている。 

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ git diff bootstrap.js
diff --git a/bootstrap.js b/bootstrap.js
index 7bbaae2..b206dc9 100644
--- a/bootstrap.js
+++ b/bootstrap.js
@@ -8,6 +8,7 @@ Ext.Loader.addClassPathMappings({
   "Ext": "ext/src",
   "Ext.Msg": "ext/src/window/MessageBox.js",
   "Ext.rtl.EventObjectImpl": "ext/src/rtl/EventObject.js",
+  "ExtThemeNeptune": "ext/packages/ext-theme-neptune/overrides",
   "MyApp": "app"
 });
 Ext.ClassManager.addNameAlternateMappings({
@@ -412,7 +413,6 @@ Ext.ClassManager.addNameAlternateMappings({
   ],
   "Ext.grid.RowEditor": [],
   "Ext.grid.RowEditorButtons": [],
-  "Ext.grid.Scroller": [],
   "Ext.grid.View": [],
   "Ext.grid.ViewDropZone": [],
   "Ext.grid.column.Action": [
@@ -828,6 +828,22 @@ Ext.ClassManager.addNameAlternateMappings({
   "Ext.window.Window": [
     "Ext.Window"
   ],
+  "ExtThemeNeptune.Component": [],
+  "ExtThemeNeptune.container.ButtonGroup": [],
+  "ExtThemeNeptune.form.field.HtmlEditor": [],
+  "ExtThemeNeptune.grid.RowEditor": [],
+  "ExtThemeNeptune.grid.column.RowNumberer": [],
+  "ExtThemeNeptune.layout.component.Dock": [],
+  "ExtThemeNeptune.menu.Menu": [],
+  "ExtThemeNeptune.menu.Separator": [],
+  "ExtThemeNeptune.panel.Panel": [],
+  "ExtThemeNeptune.panel.Table": [],
+  "ExtThemeNeptune.panel.Tool": [],
+  "ExtThemeNeptune.picker.Month": [],
+  "ExtThemeNeptune.resizer.Splitter": [],
+  "ExtThemeNeptune.tab.Tab": [],
+  "ExtThemeNeptune.toolbar.Paging": [],
+  "ExtThemeNeptune.toolbar.Toolbar": [],
   "MyApp.Application": [],
   "MyApp.controller.Main": [],
   "MyApp.view.Main": [],
@@ -1270,7 +1286,6 @@ Ext.ClassManager.addNameAliasMappings({
   "Ext.grid.RowEditorButtons": [
     "widget.roweditorbuttons"
   ],
-  "Ext.grid.Scroller": [],
   "Ext.grid.View": [
     "widget.gridview"
   ],
@@ -1820,6 +1835,22 @@ Ext.ClassManager.addNameAliasMappings({
   "Ext.window.Window": [
     "widget.window"
   ],
+  "ExtThemeNeptune.Component": [],
+  "ExtThemeNeptune.container.ButtonGroup": [],
+  "ExtThemeNeptune.form.field.HtmlEditor": [],
+  "ExtThemeNeptune.grid.RowEditor": [],
+  "ExtThemeNeptune.grid.column.RowNumberer": [],
+  "ExtThemeNeptune.layout.component.Dock": [],
+  "ExtThemeNeptune.menu.Menu": [],
+  "ExtThemeNeptune.menu.Separator": [],
+  "ExtThemeNeptune.panel.Panel": [],
+  "ExtThemeNeptune.panel.Table": [],
+  "ExtThemeNeptune.panel.Tool": [],
+  "ExtThemeNeptune.picker.Month": [],
+  "ExtThemeNeptune.resizer.Splitter": [],
+  "ExtThemeNeptune.tab.Tab": [],
+  "ExtThemeNeptune.toolbar.Paging": [],
+  "ExtThemeNeptune.toolbar.Toolbar": [],
   "MyApp.Application": [],
   "MyApp.controller.Main": [],
   "MyApp.view.Main": [
@@ -1831,8 +1862,25 @@ Ext.ClassManager.addNameAliasMappings({
   ]
 });
 Ext.setVersion("ext-theme-base", "4.2.1");
-Ext.setVersion("ext-theme-classic", "4.2.1");
+Ext.setVersion("ext-theme-neptune", "4.2.1");
 Ext.setVersion("ext-theme-neutral", "4.2.1");
+Ext.setVersion("my-custom-theme", "1.0.0");
+Ext.Loader.loadScript("ext/packages/ext-theme-neptune/overrides/Component.js");;
+Ext.Loader.loadScript("ext/packages/ext-theme-neptune/overrides/panel/Panel.js");;
+Ext.Loader.loadScript("ext/packages/ext-theme-neptune/overrides/toolbar/Toolbar.js");;
+Ext.Loader.loadScript("ext/packages/ext-theme-neptune/overrides/layout/component/Dock.js");;
+Ext.Loader.loadScript("ext/packages/ext-theme-neptune/overrides/container/ButtonGroup.js");;
+Ext.Loader.loadScript("ext/packages/ext-theme-neptune/overrides/toolbar/Paging.js");;
+Ext.Loader.loadScript("ext/packages/ext-theme-neptune/overrides/picker/Month.js");;
+Ext.Loader.loadScript("ext/packages/ext-theme-neptune/overrides/form/field/HtmlEditor.js");;
+Ext.Loader.loadScript("ext/packages/ext-theme-neptune/overrides/panel/Table.js");;
+Ext.Loader.loadScript("ext/packages/ext-theme-neptune/overrides/grid/RowEditor.js");;
+Ext.Loader.loadScript("ext/packages/ext-theme-neptune/overrides/grid/column/RowNumberer.js");;
+Ext.Loader.loadScript("ext/packages/ext-theme-neptune/overrides/resizer/Splitter.js");;
+Ext.Loader.loadScript("ext/packages/ext-theme-neptune/overrides/menu/Menu.js");;
+Ext.Loader.loadScript("ext/packages/ext-theme-neptune/overrides/menu/Separator.js");;
+Ext.Loader.loadScript("ext/packages/ext-theme-neptune/overrides/panel/Tool.js");;
+Ext.Loader.loadScript("ext/packages/ext-theme-neptune/overrides/tab/Tab.js");;
 /**
  * Sencha Blink - Development
  * @author Jacky Nguyen <jacky@sencha.com>
アプリから使ってみる : 画像スクリーンショット

では、結果を見てみます。JavaScript/ExtJS/ExtJS4 + Sencha Cmd 勉強メモ1の時に試しましたが、"/work/www/" がDocumentRootとして公開されてますので、そのまま "/extjs-tests/t1/build/production/MyApp/" のURLパスでアクセスしてみました。

適用前：

適用後：

適用後のネットワーク通信状況：

いくつか画像リソースをリクエストしていましたので、URLを抜粋します。 

http://192.168.250.103/extjs-tests/t1/build/production/MyApp/resources/images/form/spinner.png
http://192.168.250.103/extjs-tests/t1/build/production/MyApp/resources/images/util/splitter/mini-left.png

テーマ特有のディレクトリに展開されている、ということはなく、 build/(environment)/(app名)/resources/ の下にテーマの画像リソースとしてコピーされたようです。

ここで、一旦gitでcommitしておきます。 JavaScript/ExtJS/ExtJS4 + Sencha Cmd 勉強メモ1で作った環境ですので、t1アプリがそのままローカルのgitリポジトリとしてcommitできます。 

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ git add .
msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ git ci -m 'apply my-custom-theme to production build.'

ただ、削除された画像があるため、それらについてはuntrack (git rm) する必要があり、"git add ." だけでは不十分です。
詳細は割愛しますが、gitに詳しくないため、git statusの出力を適当に加工して、git rmさせました。 

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ git commit -m 'untrack removed image files'

この段階では、"${app.dir}/bootstrap.css" は直前にビルドされた production のcssを指すように更新されています。一方で、"testing" 環境はまだそのままです。
結果として、以下のように "${app.dir}/index.html" にアクセスすると"my-custom-theme"が使われ、"testing" 環境はまだ "ext-theme-classic" テーマのままです。

testingもビルドしてみる : sencha app build testing -c

testing環境もビルドしてみます。"-c"で、一旦cleanしてくれます。 

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ sencha app build testing -c
Sencha Cmd v4.0.4.84
[INF]
[INF] init-plugin:
[INF]
[INF] cmd-root-plugin.init-properties:
[INF]
[INF] init-properties:
[INF]
[INF] init-sencha-command:
[INF]
[INF] init:
[INF]
[INF] app-build-impl:
[INF]
[INF] -before-init-local:
[INF]
[INF] -init-local:
[INF]
[INF] -after-init-local:
[INF]
[INF] init-local:
[INF]
[INF] find-cmd-in-path:
[INF]
[INF] find-cmd-in-environment:
[INF]
[INF] find-cmd-in-shell:
[INF]
[INF] init-cmd:
[INF]      [echo] Using Sencha Cmd from /work/devtools/Sencha/Cmd/4.0.4.84 for /work/www/extjs-tests/t1/build.xml
[INF]
[INF] -before-init:
[INF]
[INF] -init:
[INF] Initializing Sencha Cmd ant environment
[INF] Adding antlib taskdef for com/sencha/command/compass/ant/antlib.xml
[INF]
[INF] -after-init:
[INF]
[INF] -before-init-defaults:
[INF]
[INF] -init-defaults:
[INF]
[INF] -after-init-defaults:
[INF]
[INF] -init-compiler:
[INF]
[INF] init:
[INF]
[INF] -before-build:
[INF]
[INF] refresh:
[INF]
[INF] -before-refresh:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -detect-app-build-properties:
[INF] Loading app json manifest...
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-base/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-base/overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neutral/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neutral/overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neptune/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neptune/overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/packages/my-custom-theme/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/packages/my-custom-theme/overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/app
[INF] Loading classpath entry /work/www/extjs-tests/t1/app.js
[INF] Loading classpath entry /work/www/extjs-tests/t1/build/temp/testing/MyApp/sencha-compiler/app
[WRN] C1000: Rhino Parse Warning (Trailing comma is not legal in an ECMA-262 object initializer =>     },{) -- /work/www/extjs-tests/t1/app/view/Main.js:25:5
[INF] Loading classpath entry /work/www/extjs-tests/t1/build/temp/testing/MyApp/sencha-compiler/app
[INF] Concatenating output to file /work/www/extjs-tests/t1/build/temp/testing/MyApp/sencha-compiler/cmd-packages.js
[INF] Adding external reference : @full-page => @overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/build/temp/testing/MyApp/sencha-compiler/cmd-packages.js
[INF] Adding external reference : Ext.util.Observable => /work/www/extjs-tests/t1/build/temp/testing/MyApp/sencha-compiler/cmd-packages.js
[INF]
[INF] -refresh-app:
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/bootstrap.js
[INF] Appending content to /work/www/extjs-tests/t1/bootstrap.js
[INF] Appending content to /work/www/extjs-tests/t1/bootstrap.json
[INF]
[INF] -refresh:
[INF]
[INF] -after-refresh:
[INF]
[INF] resolve:
[INF]
[INF] js:
[INF]
[INF] -before-js:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -detect-app-build-properties:
[INF]
[INF] -compile-js:
[INF] Concatenating output to file /work/www/extjs-tests/t1/build/testing/MyApp/app.js
[INF]
[INF] -js:
[INF]
[INF] -after-js:
[INF]
[INF] resources:
[INF]
[INF] -before-resources:
[INF]
[INF] -before-inherit-resources:
[INF]
[INF] -before-copy-resources:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -resources:
[INF] merging resources into /work/www/extjs-tests/t1/build/testing/MyApp/resources
[INF] merged 179 resources into /work/www/extjs-tests/t1/build/testing/MyApp/resources
[INF] merging resources into /work/www/extjs-tests/t1/build/testing/MyApp
[INF] merged 0 resources into /work/www/extjs-tests/t1/build/testing/MyApp
[INF]
[INF] -after-copy-resources:
[INF]
[INF] -after-inherit-resources:
[INF]
[INF] -after-resources:
[INF]
[INF] sass:
[INF]
[INF] -before-sass:
[INF]
[INF] -compass-compile-theme-package:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -compile-sass:
[INF] writing sass content to /work/www/extjs-tests/t1/build/temp/testing/MyApp/sass/MyApp-all.scss
[INF] appending sass content to /work/www/extjs-tests/t1/build/temp/testing/MyApp/sass/MyApp-all.scss
[INF] appending sass content to /work/www/extjs-tests/t1/build/temp/testing/MyApp/sass/MyApp-all.scss
[INF] executing compass using system installed ruby runtime
overwrite MyApp-all.css
[INF]
[INF] -compass-compile-theme-folders:
[INF]
[INF] -compass-compile-sass-dir:
[INF]
[INF] -compass-compile:
[INF]
[INF] -sass:
[INF]
[INF] -after-sass:
[INF]
[INF] slice:
[INF]
[INF] -before-slice:
[INF]
[INF] -slice-images:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -detect-app-build-properties:
[INF]
[INF] -slice-app-theme:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -compile-slicer-sass:
[INF] writing sass content to /work/www/extjs-tests/t1/build/temp/testing/MyApp/slicer-temp/MyApp-example.scss
[INF]
[INF] -compass-compile-slicer-css:
[INF] executing compass using system installed ruby runtime
overwrite MyApp-example.css
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/sass/example/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/sass/example/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/sass/example/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/sass/example/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/sass/example/bootstrap.js
[INF]      [echo] Capture theme image to /work/www/extjs-tests/t1/build/temp/testing/MyApp/slicer-temp/theme-capture.png
[INF] Capturing theme image
[INF] loading page /work/www/extjs-tests/t1/sass/example/theme.html
Capturing screenshot
Saving slicer widget manifest
Capture complete

[INF] Capture complete
[INF]      [echo] Slicing theme images to /work/www/extjs-tests/t1/build/testing/MyApp/resources
[INF] Slicing images...
[INF] Slicing complete - generated 193 images
[INF]
[INF] -slice:
[INF]
[INF] -after-slice:
[INF]
[INF] page:
[INF]
[INF] -before-page:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -copy-app-resources:
[INF]
[INF] -generate-deltas:
[INF]
[INF] -detect-app-build-properties:
[INF]
[INF] -build-standalone-json-manifest:
[INF]
[INF] -build-output-page:
[INF]
[INF] -build-output-markup-page:
[INF] Building output markup to /work/www/extjs-tests/t1/build/testing/MyApp/index.html
[INF]
[INF] -generate-cache-manifest:
[INF]
[INF] -page:
[INF]
[INF] -after-page:
[INF]
[INF] native-package:
[INF]
[INF] -build:
[INF]
[INF] -after-build:
[INF]
[INF] build:
[INF]
[INF] app-build:

差分： 

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ git stat
# On branch master
# Changes not staged for commit:
#   (use "git add <file>..." to update what will be committed)
#   (use "git checkout -- <file>..." to discard changes in working directory)
#
#       modified:   bootstrap.css
#       modified:   bootstrap.js
#       modified:   build/testing/MyApp/app.js
#       modified:   build/testing/MyApp/resources/MyApp-all.css
#       modified:   build/testing/MyApp/resources/Readme.md
#       modified:   build/testing/MyApp/resources/images/btn-group/btn-group-default-framed-corners.gif
#       modified:   build/testing/MyApp/resources/images/btn-group/btn-group-default-framed-notitle-corners.gif
#       modified:   build/testing/MyApp/resources/images/btn-group/btn-group-default-framed-notitle-sides.gif
#       modified:   build/testing/MyApp/resources/images/btn-group/btn-group-default-framed-sides.gif
#       modified:   build/testing/MyApp/resources/images/btn/btn-default-large-bg.gif
#       modified:   build/testing/MyApp/resources/images/btn/btn-default-large-corners.gif
#       modified:   build/testing/MyApp/resources/images/btn/btn-default-large-disabled-bg.gif
#       modified:   build/testing/MyApp/resources/images/btn/btn-default-large-disabled-corners.gif
#       modified:   build/testing/MyApp/resources/images/btn/btn-default-large-disabled-fbg.gif
       (... この辺は、画像ファイルの変更・削除になります)
#       modified:   build/testing/MyApp/resources/images/window/window-default-corners.gif
#       modified:   build/testing/MyApp/resources/images/window/window-default-sides.gif
#       modified:   sass/example/bootstrap.js
#       modified:   sass/example/example.css
#
# Untracked files:
#   (use "git add <file>..." to include in what will be committed)
#
#       build/testing/MyApp/resources/images/btn/btn-default-toolbar-large-bg.gif
#       build/testing/MyApp/resources/images/btn/btn-default-toolbar-large-corners.gif
#       build/testing/MyApp/resources/images/btn/btn-default-toolbar-large-disabled-bg.gif
       (... この辺は、画像ファイルの追加になります)
#       build/testing/MyApp/resources/images/util/splitter/mini-right.png
#       build/testing/MyApp/resources/images/util/splitter/mini-top.png
no changes added to commit (use "git add" and/or "git commit -a")

差分抜粋：bootstrap.css : これは単に、直前ビルドはproductionだったため、呼び出すCSSのパスがtesting用に更新されたことによる。 

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ git diff bootstrap.css
diff --git a/bootstrap.css b/bootstrap.css
index 5d9ec26..3837424 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -5,5 +5,5 @@
  * to the most recently built CSS file for the application to allow index.html
  * in the development directory to load properly (i.e., "dev mode").
  */
-@import 'build/production/MyApp/resources/MyApp-all.css';
+@import 'build/testing/MyApp/resources/MyApp-all.css';

差分抜粋：bootstrap.js : ・・・もしかして、testing環境だと Ext.grid.Scrollerが有効になるのか・・・？少なくとも今回の記事のテーマとは関連しない。 

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ git diff bootstrap.js
diff --git a/bootstrap.js b/bootstrap.js
index b206dc9..a543ff5 100644
--- a/bootstrap.js
+++ b/bootstrap.js
@@ -413,6 +413,7 @@ Ext.ClassManager.addNameAlternateMappings({
   ],
   "Ext.grid.RowEditor": [],
   "Ext.grid.RowEditorButtons": [],
+  "Ext.grid.Scroller": [],
   "Ext.grid.View": [],
   "Ext.grid.ViewDropZone": [],
   "Ext.grid.column.Action": [
@@ -1286,6 +1287,7 @@ Ext.ClassManager.addNameAliasMappings({
   "Ext.grid.RowEditorButtons": [
     "widget.roweditorbuttons"
   ],
+  "Ext.grid.Scroller": [],
   "Ext.grid.View": [
     "widget.gridview"
   ],

Webブラウザで testing にアクセスしてみると、以下のようにmy-custom-themeが有効化されました。

画像アイコンなどのロードについては、以下のように "build/testing/MyApp/resources/" 以下の画像がロードされていました。 

http://192.168.250.103/extjs-tests/t1/build/testing/MyApp/resources/images/util/splitter/mini-bottom.png

この段階で、gitにもcommitしておきます。 

$ git add .
$ git commit -m 'apply my-custom-theme to testing build.'

練習3: 特定のExtコンポーネントのCSS変数を変更してみる

例として、Ext.panel.Panelの "$panel-header-font-family" を変更してみます。
"Ext.panel.Panel" クラスで、SASSの名前空間は"Ext"になってますので、"sass/var/panel/Panel.scss" ファイルを作成し、以下の内容を設定します。
"${app.dir}/packages/my-custom-theme/sass/var/panel/Panel.scss": 

$panel-header-font-family: Times New Roman !default;

そのまま、"sencha app build"してみます。 

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ sencha app build
Sencha Cmd v4.0.4.84
[INF]
[INF] init-plugin:
[INF]
[INF] cmd-root-plugin.init-properties:
[INF]
[INF] init-properties:
[INF]
[INF] init-sencha-command:
[INF]
[INF] init:
[INF]
[INF] app-build-impl:
[INF]
[INF] -before-init-local:
[INF]
[INF] -init-local:
[INF]
[INF] -after-init-local:
[INF]
[INF] init-local:
[INF]
[INF] find-cmd-in-path:
[INF]
[INF] find-cmd-in-environment:
[INF]
[INF] find-cmd-in-shell:
[INF]
[INF] init-cmd:
[INF]      [echo] Using Sencha Cmd from /work/devtools/Sencha/Cmd/4.0.4.84 for /work/www/extjs-tests/t1/build.xml
[INF]
[INF] -before-init:
[INF]
[INF] -init:
[INF] Initializing Sencha Cmd ant environment
[INF] Adding antlib taskdef for com/sencha/command/compass/ant/antlib.xml
[INF]
[INF] -after-init:
[INF]
[INF] -before-init-defaults:
[INF]
[INF] -init-defaults:
[INF]
[INF] -after-init-defaults:
[INF]
[INF] -init-compiler:
[INF]
[INF] init:
[INF]
[INF] -before-build:
[INF]
[INF] refresh:
[INF]
[INF] -before-refresh:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -detect-app-build-properties:
[INF] Loading app json manifest...
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-base/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-base/overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neutral/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neutral/overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neptune/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/ext/packages/ext-theme-neptune/overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/packages/my-custom-theme/src
[INF] Loading classpath entry /work/www/extjs-tests/t1/packages/my-custom-theme/overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/app
[INF] Loading classpath entry /work/www/extjs-tests/t1/app.js
[INF] Loading classpath entry /work/www/extjs-tests/t1/build/temp/production/MyApp/sencha-compiler/app
[WRN] C1000: Rhino Parse Warning (Trailing comma is not legal in an ECMA-262 object initializer =>     },{) -- /work/www/extjs-tests/t1/app/view/Main.js:25:5
[INF] Loading classpath entry /work/www/extjs-tests/t1/build/temp/production/MyApp/sencha-compiler/app
[INF] Concatenating output to file /work/www/extjs-tests/t1/build/temp/production/MyApp/sencha-compiler/cmd-packages.js
[INF] Adding external reference : @full-page => @overrides
[INF] Loading classpath entry /work/www/extjs-tests/t1/build/temp/production/MyApp/sencha-compiler/cmd-packages.js
[INF] Adding external reference : Ext.util.Observable => /work/www/extjs-tests/t1/build/temp/production/MyApp/sencha-compiler/cmd-packages.js
[INF]
[INF] -refresh-app:
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/bootstrap.js
[INF] Appending content to /work/www/extjs-tests/t1/bootstrap.js
[INF] Appending content to /work/www/extjs-tests/t1/bootstrap.json
[INF]
[INF] -refresh:
[INF]
[INF] -after-refresh:
[INF]
[INF] resolve:
[INF]
[INF] js:
[INF]
[INF] -before-js:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -detect-app-build-properties:
[INF]
[INF] -compile-js:
[INF] Loading classpath entry /work/devtools/Sencha/Cmd/4.0.4.84/plugins/src
[INF] Loading classpath entry /work/devtools/Sencha/Cmd/4.0.4.84/plugins/ext/src
[INF] Loading classpath entry /work/devtools/Sencha/Cmd/4.0.4.84/plugins/ext/4.2/src
[INF] Building optimized concatenated output..
[INF] Compressing data with YuiJavascriptCompressor
[INF] Concatenating output to file /work/www/extjs-tests/t1/build/production/MyApp/app.js
[INF]
[INF] -js:
[INF]
[INF] -after-js:
[INF]
[INF] resources:
[INF]
[INF] -before-resources:
[INF]
[INF] -before-inherit-resources:
[INF]
[INF] -before-copy-resources:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -resources:
[INF] merging resources into /work/www/extjs-tests/t1/build/production/MyApp/resources
[INF] merged 0 resources into /work/www/extjs-tests/t1/build/production/MyApp/resources
[INF] merging resources into /work/www/extjs-tests/t1/build/production/MyApp
[INF] merged 0 resources into /work/www/extjs-tests/t1/build/production/MyApp
[INF]
[INF] -after-copy-resources:
[INF]
[INF] -after-inherit-resources:
[INF]
[INF] -after-resources:
[INF]
[INF] sass:
[INF]
[INF] -before-sass:
[INF]
[INF] -compass-compile-theme-package:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -compile-sass:
[INF] writing sass content to /work/www/extjs-tests/t1/build/temp/production/MyApp/sass/MyApp-all.scss
[INF] appending sass content to /work/www/extjs-tests/t1/build/temp/production/MyApp/sass/MyApp-all.scss
[INF] appending sass content to /work/www/extjs-tests/t1/build/temp/production/MyApp/sass/MyApp-all.scss
[INF] executing compass using system installed ruby runtime
overwrite MyApp-all.css
[INF]      [echo] Compressing /work/www/extjs-tests/t1/build/production/MyApp/resources/MyApp-all.css to /work/www/extjs-tests/t1/build/production/MyApp/resourcess
[INF] srcfile: /work/www/extjs-tests/t1/build/production/MyApp/resources/MyApp-all.css (633216 bytes)
[INF] outfile: /work/www/extjs-tests/t1/build/production/MyApp/resources/MyApp-all.css
[INF] Compressed size 278360 bytes. Saved 354856 bytes (56 %)
[INF]
[INF] -compass-compile-theme-folders:
[INF]
[INF] -compass-compile-sass-dir:
[INF]
[INF] -compass-compile:
[INF]
[INF] -sass:
[INF]
[INF] -after-sass:
[INF]
[INF] slice:
[INF]
[INF] -before-slice:
[INF]
[INF] -slice-images:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -detect-app-build-properties:
[INF]
[INF] -slice-app-theme:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -compile-slicer-sass:
[INF] writing sass content to /work/www/extjs-tests/t1/build/temp/production/MyApp/slicer-temp/MyApp-example.scss
[INF]
[INF] -compass-compile-slicer-css:
[INF] executing compass using system installed ruby runtime
overwrite MyApp-example.css
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/sass/example/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/sass/example/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/sass/example/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/sass/example/bootstrap.js
[INF] Appending concatenated output to file /work/www/extjs-tests/t1/sass/example/bootstrap.js
[INF]      [echo] Capture theme image to /work/www/extjs-tests/t1/build/temp/production/MyApp/slicer-temp/theme-capture.png
[INF] Capturing theme image
[INF] loading page /work/www/extjs-tests/t1/sass/example/theme.html
Capturing screenshot
Saving slicer widget manifest
Capture complete

[INF] Capture complete
[INF]      [echo] Slicing theme images to /work/www/extjs-tests/t1/build/production/MyApp/resources
[INF] Slicing images...
[INF] Slicing complete - generated 193 images
[INF]
[INF] -slice:
[INF]
[INF] -after-slice:
[INF]
[INF] page:
[INF]
[INF] -before-page:
[INF]
[INF] -init:
[INF]
[INF] -init-compiler:
[INF]
[INF] -copy-app-resources:
[INF]
[INF] -generate-deltas:
[INF]
[INF] -detect-app-build-properties:
[INF]
[INF] -build-standalone-json-manifest:
[INF]
[INF] -build-output-page:
[INF]
[INF] -build-output-markup-page:
[INF] Building output markup to /work/www/extjs-tests/t1/build/production/MyApp/index.html
[INF]
[INF] -generate-cache-manifest:
[INF]
[INF] -page:
[INF]
[INF] -after-page:
[INF]
[INF] native-package:
[INF]
[INF] -build:
[INF]
[INF] -after-build:
[INF]
[INF] build:
[INF]
[INF] app-build:

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ git status
# On branch master
# Changes not staged for commit:
#   (use "git add <file>..." to update what will be committed)
#   (use "git checkout -- <file>..." to discard changes in working directory)
#
#       modified:   bootstrap.css
#       modified:   bootstrap.js
#       modified:   build/production/MyApp/resources/MyApp-all.css
#       modified:   sass/example/bootstrap.js
#       modified:   sass/example/example.css
#
# Untracked files:
#   (use "git add <file>..." to include in what will be committed)
#
#       packages/my-custom-theme/sass/var/panel/
no changes added to commit (use "git add" and/or "git commit -a")

特にもう差分を確認したりはしませんが、この時点でproductionの"MyApp-all.css"が更新されており、"${app.dir}/index.html" が参照する bootstrap.css も production の MyApp-all.css を参照するよう更新されています。

"${app.dir}/index.html" で確認してみると、確かにPanelのfont familyが "Times New Roman" に変更されていました。

testingの方でもビルドし、gitにcommitしておきます。 

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ sencha app build testing
msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ git commit -m 'add Ext.panel.Panel styling.'

アプリ固有のカスタマイズを行う (${app.dir}/sass)

上記までの例は、テーマpackageによるExtコンポーネント全体のカスタマイズでした。
しかし、アプリ側でテーマが指定してきたCSS変数を上書きしたい、あるいは独自のCSSルールを作成したい、というユースケースも当然ながら出てきます。
そうした場合は、"${app.dir}/sass" の下の、srcやvarディレクトリを使います。

"${app.dir}/sass" の下の名前空間について

packageでテーマを作成した時は、sassの下の名前空間は "Ext" 接頭辞になっていました。
"${app.dir}/sass" の場合は、アプリ名が名前空間になります。
今回の例では、アプリ名は "MyApp" であるため、"MyApp.view.Viewport" というクラスがあれば、"${app.dir}/sass/var/view/Viewport.scss" や "${app.dir}/sass/src/view/Viewport.scss" が読み込まれます。
これは "${app.dir}/.sencha/app/sencha.cfg" の "app.sass.namespace" でカスタマイズ可能です。
とはいえ、ExtJSの公式ドキュメントでもそれは推奨されておらず、もしアプリ名以外の名前空間にたいしてカスタマイズを行うのであれば自分のテーマを作成してそちらで実施する方向を推奨しています。

グローバルなCSS変数をアプリ側で上書きするには、じゃぁどこで設定すればよいのか？

アプリ固有の名前空間の調整により、事実上、Ext.Componentに対応するファイル名で".scss"ファイルをアプリ側で作成するのは現実的ではなくなります。
なぜなら、"${app.dir}/sass/var/Component.scss" というファイル名があっても、"MyApp.Component" というクラス名が無ければ、読み込まれることは無いからです。

逆に言えば、対応するクラス名さえ用意されていれば、どこで記述してもグローバルなCSS変数を上書きできます。・・・多分・・・(・_・;)

というのは、以下の例では "MyApp.Application" クラスに対応する形で進めていますが、当初は "MyApp.view.sub.FormDemo" クラス ("${app.dir}/app/view/sub/FormDemo.js") に対応する "${app.dir}/sass/var/view/sub/FormDemo.scss" を使っていて、てっきり「MyApp.view.sub.FormDemo の Panel でのみ、"$panel-header-color" が適用される」と勘違いしてたんです。
ところが実際に試してみたら、view/Main.js で定義している他のPanelにも設定が波及していました。

これ、ExtJSの公式ドキュメントを注意深く読むと分かるんですが、結局最終的にビルドされるCSSには、テーマ側のSASSと、"${app.dir}/sass" のSASSが統合されます。
そのとき、「このクラス限定」みたいな統合のされ方ではなくて、単純にファイル結合みたく上書き、上書き、で重ねられてくんだと思います。
".scss"のファイルを取り込む基準として単に、対応するクラスがあるかないかだけがチェックされてて、対応するクラスさえあれば、単純に上書き、上書き、で結合されてくのだと思われます。

なので、MyApp.view.sub.FormDemo に対応させたつもりの "${app.dir}/sass/var/view/sub/FormDemo.scss" は、実は本当にグローバルなCSS変数を上書きしていた、という事情と思われます。

・・・ちょっとこの辺の理解、怪しい箇所もあるので、間違ってたらメールかなにかでコメント下さい・・・。(；´Д｀)

アプリ側でグローバルなCSS変数をカスタマイズする

今回はPanelのヘッダー部分の文字色をアプリ側でカスタマイズしてみます。
対応するクラスとしてMyApp.Applicationがちょうど良かったので、sass/var の下にApplication.scssファイルを以下の内容で作成しました。
"${app.dir}/sass/var/Application.scss" : 

$panel-header-color: #ff6600;

※統合される順番の都合で、こちらでは "!default" は要りません。詳しくはExtJSドキュメントの、"Components" -> "Theming" の "Changing Theme Variables in Your Application" の説明を参照して下さい。

testingでビルドしてみます。 

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ sencha app build testing -c
...

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ git add .
msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ git status
# On branch master
# Changes to be committed:
#   (use "git reset HEAD <file>..." to unstage)
#
#       modified:   build/testing/MyApp/resources/MyApp-all.css
#       new file:   sass/var/Application.scss
#

msakamoto@dev1-u1204lts-x64:/work/www/extjs-tests/t1$ git diff --cached build/testing/MyApp/resources/MyApp-all.css
diff --git a/build/testing/MyApp/resources/MyApp-all.css b/build/testing/MyApp/resources/MyApp-all.css
index 2e91098..328957d 100644
--- a/build/testing/MyApp/resources/MyApp-all.css
+++ b/build/testing/MyApp/resources/MyApp-all.css
@@ -63,6 +63,7 @@
 /* including package ext-theme-neutral */
 /* including package ext-theme-neptune */
 /* including package my-custom-theme */
+/* including package MyApp */
 /* including package my-custom-theme */
 /* including package ext-theme-neptune */
 /**
@@ -8905,7 +8906,7 @@ body.x-nbr .x-btn-default-toolbar-large-frameInfo {

 /* line 260, ../../../../ext/packages/ext-theme-neutral/sass/src/panel/Panel.scss */
 .x-panel-header-text-container-default {
-  color: white;
+  color: #ff6600;
   font-size: 16px;
   font-weight: bold;
   font-family: Times New Roman;
@@ -9015,14 +9016,14 @@ body.x-nbr .x-btn-default-toolbar-large-frameInfo {
 }
 /* line 556, ../../../../ext/packages/ext-theme-neutral/sass/src/panel/Panel.scss */
 .x-panel-header-default .x-panel-header-glyph {
-  color: white;
+  color: #ff6600;
   font-size: 16px;
   line-height: 16px;
   opacity: 0.5;
 }
 /* line 572, ../../../../ext/packages/ext-theme-neutral/sass/src/panel/Panel.scss */
 .x-ie8m .x-panel-header-default .x-panel-header-glyph {
-  color: #98b79f;
+  color: #986b20;
 }

 /* line 580, ../../../../ext/packages/ext-theme-neutral/sass/src/panel/Panel.scss */
@@ -9223,7 +9224,7 @@ body.x-nbr .x-btn-default-toolbar-large-frameInfo {

 /* line 260, ../../../../ext/packages/ext-theme-neutral/sass/src/panel/Panel.scss */
 .x-panel-header-text-container-default-framed {
-  color: white;
+  color: #ff6600;
   font-size: 16px;
   font-weight: bold;
   font-family: Times New Roman;
@@ -10627,14 +10628,14 @@ body.x-nbr .x-panel-header-default-framed-collapsed-left-frameInfo {
 }
 /* line 556, ../../../../ext/packages/ext-theme-neutral/sass/src/panel/Panel.scss */
 .x-panel-header-default-framed .x-panel-header-glyph {
-  color: white;
+  color: #ff6600;
   font-size: 16px;
   line-height: 16px;
   opacity: 0.5;
 }
 /* line 572, ../../../../ext/packages/ext-theme-neutral/sass/src/panel/Panel.scss */
 .x-ie8m .x-panel-header-default-framed .x-panel-header-glyph {
-  color: #98b79f;
+  color: #986b20;
 }

 /* line 580, ../../../../ext/packages/ext-theme-neutral/sass/src/panel/Panel.scss */
@@ -11667,7 +11668,7 @@ body.x-nbr .x-window-default-frameInfo {

 /* line 233, ../../../../ext/packages/ext-theme-neutral/sass/src/window/Window.scss */
 .x-window-header-text-container-default {
-  color: white;
+  color: #ff6600;
   font-weight: bold;
   line-height: 15px;
   font-family: Times New Roman;
@@ -12836,21 +12837,21 @@ body.x-nbr .x-window-header-default-collapsed-left-frameInfo {
 .x-window-header-default .x-window-header-icon {
   width: 16px;
   height: 16px;
-  color: white;
+  color: #ff6600;
   font-size: 16px;
   line-height: 16px;
   background-position: center center;
 }
 /* line 364, ../../../../ext/packages/ext-theme-neutral/sass/src/window/Window.scss */
 .x-window-header-default .x-window-header-glyph {
-  color: white;
+  color: #ff6600;
   font-size: 16px;
   line-height: 16px;
   opacity: 0.5;
 }
 /* line 380, ../../../../ext/packages/ext-theme-neutral/sass/src/window/Window.scss */
 .x-ie8m .x-window-header-default .x-window-header-glyph {
-  color: #a7c2ad;
+  color: #a7752e;
 }

 /* line 388, ../../../../ext/packages/ext-theme-neutral/sass/src/window/Window.scss */
@@ -17740,14 +17741,14 @@ body.x-nbr .x-btn-plain-toolbar-large-frameInfo {
 }
 /* line 556, ../../../../ext/packages/ext-theme-neutral/sass/src/panel/Panel.scss */
 .x-panel-header-light .x-panel-header-glyph {
-  color: white;
+  color: #ff6600;
   font-size: 16px;
   line-height: 16px;
   opacity: 0.5;
 }
 /* line 572, ../../../../ext/packages/ext-theme-neutral/sass/src/panel/Panel.scss */
 .x-ie8m .x-panel-header-light .x-panel-header-glyph {
-  color: #f0f3f1;
+  color: #f0a771;
 }

 /* line 580, ../../../../ext/packages/ext-theme-neutral/sass/src/panel/Panel.scss */
@@ -19353,14 +19354,14 @@ body.x-nbr .x-panel-header-light-framed-collapsed-left-frameInfo {
 }
 /* line 556, ../../../../ext/packages/ext-theme-neutral/sass/src/panel/Panel.scss */
 .x-panel-header-light-framed .x-panel-header-glyph {
-  color: white;
+  color: #ff6600;
   font-size: 16px;
   line-height: 16px;
   opacity: 0.5;
 }
 /* line 572, ../../../../ext/packages/ext-theme-neutral/sass/src/panel/Panel.scss */
 .x-ie8m .x-panel-header-light-framed .x-panel-header-glyph {
-  color: #f0f3f1;
+  color: #f0a771;
 }

 /* line 580, ../../../../ext/packages/ext-theme-neutral/sass/src/panel/Panel.scss */

[master 5a33d1d] apply app specific panel-header-color.
 2 files changed, 16 insertions(+), 14 deletions(-)
 create mode 100644 sass/var/Application.scss

Web画面上で確認してみると、Panelのヘッダ文字列が指定通りの色に変化していました。

original url: https://www.glamenv-septzen.net/view/1292