#navi_header|JavaScript|

「Sencha Ext JS 4実践開発ガイド」の読書メモです。

#amazon||>
<iframe src="http://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=glamenvseptze-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=4939061493" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
||<

2014年9月現在、既にExtJS5がリリースされている状況ですが、ExtJS4以降の基本を網羅的に概説してくれている日本語書籍としては貴重な一冊です。

難点は、この書籍で解説されているExtJS4が（恐らく）もう入手できなくなっていることでしょうか。Sencha本家サイトから評価版、あるいはGPLv3用にDLできるのはExtJS5のみで、ExtJS4をDLするリンクは見当たりません。

この読書メモでは、そのような現在の状況で、この本でどう手を動かして学ぶか、また、自分が気になったポイントについてメモとして残します。
----
* そもそも2014年9月現在でExtJS4を練習するには？→Sencha Fiddleを使いましょう。

Sencha Fiddleを使うと、過去のExtJSのバージョンを簡単に動かして練習ができます。
- https://fiddle.sencha.com/

「開発ガイド」の方では.jsや.cssを手動で読み込む形式を紹介していますが、現在はSencha Cmdというビルドシステムが導入され、これでSPAのひな形を自動生成する流れが主流になっています。
Sencha Cmdで生成されたひな形をベースに、テスト用ならそれようのJSが、プロダクション環境用ならminifyされたJSがロードされるようにHTMLがビルドされます。
そのため、新規にアプリを作成する流れで勉強するなら、以下の順序が今ならオススメかと思います。
+ Sencha Fiddleで遊ぶ。
+ Sencha Cmdを勉強する。

ただし、既存のサイトに部分的に、ライブラリとしてExtJSを導入するのであれば、Sencha Cmdの重厚なビルドシステムを導入するのが難しい場合もあります。そうした場合に、ExtJSのライブラリやCSSを手動で既存のHTMLに組み込むことになると思います。そのようなときに、書籍で紹介されている方法が参考になると思います。

* 公式からAPIドキュメントは公開されてないの？→公開されてます。

ドキュメント
- http://docs.sencha.com/extjs/
-- 2014-09現在、自動的にextjs 5.0にジャンプします。ただし、ヘッダーのメニューから、他のバージョンや他のSencha製品のドキュメントにアクセスできます。
-- もちろん、ExtJS4系のドキュメントも用意されてます。その中には、ExtJS4の時のサンプルアプリ集も含まれてます。

* 「第5章 クラスシステム」メモ

ExtJSは独自のクラスシステムを導入しています。その中で、個人的に特に押さえておいた方が良いのは、configとmixinとoverridesです。
なぜこれらが大事かというと・・・
- ''configを理解していないと、問題発生時の調査に時間が取られる''
-- configはExtJSコンポーネントを作成するときに必ず使われますので、ここで混乱してしまうと、ちょっとツマヅイた時にどこが悪いのか、問題調査に時間を取られます。
- ''mixinを理解していないと、APIドキュメントを読み解くのが大変になる''
-- 前述のAPIドキュメントでは、クラスのメソッド一覧に、継承した親クラスのメソッド + mixinされたクラスのメソッドが出てきます。そのため、「このメソッドはmixinされたクラスで提供されてるメソッドだな」という点を注意していないと、ドキュメントを読むときに混乱します。
- ''overridesを理解していないと、フォーラムでのサンプルコードの意味が分からない時がある''
-- overridesは既存クラスにパッチをあてる使われ方をしてまして、Senchaフォーラムで「こうしたら解決するよhahaha」的なサンプルコードに頻出します。
-- そのため、overridesの使い方を理解していないと、それが今自分が使っているバージョンに取り込まれているか、取り込まれていなければどう追加すれば良いのかわからなくなります。

config と mixin を理解しておけば、ExtJSのソースコードを読むのも楽になります。

ちょっと古いですが、Senchaの英語ドキュメントでこんなのもあります。
- The Sencha Class System | Learn | Sencha
-- http://www.sencha.com/learn/sencha-class-system

自分が、基本的なクラスシステムの使い方、config, mixin, overridesの使い方を練習したSencha Fiddle:
- Demo1 : Basic Class System
-- https://fiddle.sencha.com/#fiddle/abc
- Demo2 : config option (Class System)
-- https://fiddle.sencha.com/#fiddle/abe
- Demo3 : mixin (Class System)
-- https://fiddle.sencha.com/#fiddle/abf
- Demo4 : overrides (Class System)
-- https://fiddle.sencha.com/#fiddle/abg

* 「第6章 イベントモデル」メモ

ExtJSはGUIコンポーネントが強力で、それらを使うとなればイベント駆動のプログラミングが必要です。ExtJSの場合、Ext.util.Observableというクラスをmixinすることで(このようにフレームワークの根本部分でmixinが使われてますので、mixinは重要)、DOM要素以外のクラスでもイベントハンドラを設定できます。このおかげで、イベントを発火させたい対象がDOM要素であるか否かを意識せずに、イベント駆動のプログラミングを実践できます。

ということで、DOM要素(=GUIコンポーネント)以外でもExt.util.Observableをmixinすればイベントハンドラを持てるようになるデモ：
- Event Demo1 : listeners config and fireEvent()
-- https://fiddle.sencha.com/#fiddle/abh
- Event Demo2 : add/removeListener() and capture()
-- https://fiddle.sencha.com/#fiddle/abm

書籍ではrelayEvents()も紹介されていますが、こちらもSencha Fiddleで練習してみました：
- Event Demo3 : relayEvents()
-- https://fiddle.sencha.com/#fiddle/abn


なお、Ext.util.Observableのメソッド一覧を見てみますと、"(add|remove)ManagedListener()"と対応する"mon|mun()"メソッドがあります。これと、普通の"(add|remove)Listener()"(on|un())との違いが分からなかったのですが、英語ですが良い記事がありました：
- Demystifying Ext JS Managed Event Listeners | Farata Systems
-- http://flexblog.faratasystems.com/2012/06/30/ext-js-managed-event-listener
--- 一言で言うと、動的に生成・削除されるコンポーネントが他の要素のイベントをlistenしたい場合、mon|mun()を使う、という使い分けになります。
→この記事に出てくるサンプルコードをSencha Fiddleで練習してみました：
- Event Demo4 : managed listeners (from other's excellent blog article)
-- https://fiddle.sencha.com/#fiddle/abo

* 「第7章 コンポーネントモデル」

こちらの書籍では詳しく書かれていませんが、実際に開発する際は、ExtJSでボタンなどGUIコンポーネントを組み立てる時、どのようなライフサイクルで管理されているか知っておいたほうが良いと思います。

ExtJS5、しかも英語になりますが、ExtJS4から大きくは変わってない模様：
- Ext JS Guides | Components
-- http://docs.sencha.com/extjs/5.0/core_concepts/components.html

なぜライフサイクルを知っておいたほうが良いかというと、複雑なGUIを構築・管理する際に、必ず「いつレンダリングされるのか」「レンダリングされるタイミングで○○したい」「破棄されるタイミングはいつか」などを気にする必要が出てきます。この時、ライフサイクルがどうなっているか注意できるようになっておくと、解決方法も探しやすいです（実感）。

他に、書籍でちょっと気になったのが、「7.7. 状態管理」というところでExt.state.Providerの紹介です。CookieやlocalStorageで管理できるみたいで、面白そうです。
まだ練習できていないのですが、history APIも出てきていますので、このような状態管理をどう制御するのか、実際のアプリでも色々検討が必要なポイントかな、と思います。
特にSPAですと、この辺りはユーザの使い勝手に直結してきますので、より詳細な調査・検討が必要になる箇所かと思います。

#navi_footer|JavaScript|