ExtJS6 今更の事始め3

Sencha Advent Calendar 2015 24日目です。

前回同様、What’s New In Ext JS 6の続きです。
最終日前日だったのに遅れちゃいました(´・ω・`)
スミマセン、スミマセン。゚(゚´Д`゚)゚。

fashion

ExtJS6から、fashionという機能が追加されスタイルの修正がやりやすくなっています。
やり方は簡単です。

いつも通り、sencha app watchします。
watchすると内部でWebサーバが立ち上がるのでブラウザでアクセスします。
基本は

http://localhost:1841/

のURLですね。

以下は、sencha generate appで作成したアプリケーションの初期画面です。
この画面のベースカラーを変えてみます。

MyApp

classic/sass/var/ディレクトリに、Application.scssファイルを作成します。

MyApp_-____Workspace_home_SenchaWorkspace_MyApp_

Application.cssのファイルの内容です。

保存すると、SenchaCmdが勝手にコンパイルしてくれますが、ブラウザをリロードしないと設定は反映されません。
たかだかリロード、面倒ですね。
そこでfashionを使います。

URLの後ろにクエリパラメーターを追加します。

http://localhost:1841/?platformTags=fashion:true

クエリパラメーターをつけて画面を再表示したら、先ほど作成したApplication.scssの内容を変更します。

変更したらブラウザを見てみると、あら不思議、リロードせずとも画面が変わってます。

MyApp

まぁLiveReloadとかと同じですね。(´・ω・`)
これまでもGruntJSやgulpを使って同じ事やってましたが、その設定がいらなくなるので地味に便利じゃないでしょうか。

ということでホント触りの部分だけで恐縮ですが、これで今年のAdvent Calendar、自分の番はおしまいです!
来年もよろしくおねがいいたします( `・∀・´)ノ