Ext JS 5 のパブリックベータが発表になりました。

• Sencha Blog での発表
• 日本語訳

楽しみです。今回は Ext JS 4 からの後方互換性がかなり意識してリリースされているので、 Ext JS 3 から 4 へのドラスティックな変化のようなことはなさそうです。

しかし、エンジニアとして注目したい機能が沢山詰まっています。 これは楽しみです。

今日は、その中でもイベントのことについて触れましょう。 Ext JS 3 の頃から、コンポーネントのイベントにリスナーを設定する事はできました。

• listners コンフィグで

• on メソッドで

Ext JS 4 の時に MVC が導入され、Controller の中でビューにイベントリスナーをセットできるようになりました。

コントローラーからビューを参照するために、refs コンフィグもできました。

これで、コントローラーに getSaveButton というゲッターメソッドができます。

Ext JS 5 からは ViewController というのが追加されました。 ViewController は、ビューに強くバインドしたコントローラーです。 ビューとの連携が強いので、refsやcontrolの定義なしで、参照やリスナーのセットができます。 これを使うと、ビューの方で次の様なコンフィグを設定します。

最初のアイテムには、reference というコンフィグがついています。 二つ目のアイテムの listeners の関数オブジェクトをセットするべき所に ‘onClickSave’ という文字列がセットされています。 こうしておくと ViewController で

こんな風に書くことができます。 refs や control の設定をView側で書く感じですね。 これまで、refs や control の定義は少々面倒くさいなぁと思っていたところもありましたが、 これを使うとコーディング量も少ないし、しかもわかりやすい。

僕はコントローラーが、ビューの構造に依存しすぎるのを懸念していました。 例えば、

こんな風にコンポーネントクエリを書いていたら、ビューの構造が変わったらこのリスナーは呼ばれなくなります。 ですから、ビューの方で

というように、カスタムイベントを発火して、コントローラーでは

と、カスタムイベントにリスナーをセットするということをやっていました。 これで、ビューの構造をコントローラーは知る必要がなくなります。

が、ViewContoller を使えば、こういう必要もありません。

とても、便利ですね。

Ext JS 5 には他にも紹介したい機能がいっぱいあります。 時間を見つけて、いくつかの昨日について紹介したいと思っています。