読書メモ: Ext JS 4 First Look / Capter 2

The New Data Package

Ext JS 4になってパワフルで使いやすくなったよ。

The new model class

ModelはExt JS 3以前のRecordとよく似ている。 Ext JS 3のRecordとExt JS 4のModelの違い

  • ValidationやAssociationがある。
  • Proxyを使って直接データのロード・セーブができる。 ProxyはStoreにアタッチできるが、直接Modelにもアタッチできる。

Declaring fields

Modelでfieldを定義するのはRecordとほとんど同じ方法で可能。

Ext JS 3 にあった allowBlank は Ext JS 4 では提供されない。

Recordクラスをサポートしないのに、 Ext JS 4の関数にはメソッド名にはRecordを使っているものがある。 互換性のため？ だけど、Ext JS 3にあった~~Recordといったメソッドは、 ちゃんとExt JS 4にもあるのかチェックした方がいい。

Modelのインスタンスを作るには二つの方法がある。

  • Ext.create メソッドで作る
  • Ext.ModelMgr.create()メソッドで作る

Varidating the model

バリデーションはModelの新しい機能。 モデル内にバリデーション定義を設定する。

validation の定義はfieldの定義と同じ構造で type と field を定義する。 一つのフィールドに複数のバリデーションを指定できる。

本書では presence length format inclusion exclusion の5つあると紹介されているが、4.0.7以降にemailが追加されている。

モデルをバリデーションするにはvalidateメソッドをコールする。 このメソッドは Ext.data.Errors オブジェクトを返す。

[js] errors.isValid(); errors.items; [/js]

isValidメソッドの戻り値がtrueならモデルデータは正しい。 itemsプロパティには発生したすべてのエラーが入る

[js] errors.getByField() [/js]

を使うとフィールドを指定してエラーを取れる。

Loading/saving data with proxies and stores

データのロード・セーブはproxyの中で行われ ModelからのアクションをStoreを使うことなく実行できる。 てことは、Modelから直接データのロード・セーブができる。

loadメソッド -> GETリクエスト saveメソッド -> PUTリクエスト destroyメソッドで廃棄 -> DELETEリクエスト createメソッドで生成して保存 -> POSTリクエスト

proxyはStoreにも設定できる。 Storeにproxyを設定するのは、同じモデルでurlが違うStoreがあるような場合に便利。

Linking models through associations

name: コンフィグはオーナーモデルに生成される 関連するモデルを取得する関数の名前。 デフォルトはオーナーモデルの名前にsをつけて小文字にしたもの。

foreignKeyのデフォルトは、オーナーモデル名(小文字) + ‘_id’

filterProperty:

アソシエーションは

hasMany: {..} とか belongsTo: {…}

とかの書き方ができるが， 両方指定するときには次のようにも書ける。

[js] associations: [ {type: ‘hasMany’, ….}, {type: ‘belongsTo’, ….} ] [/js]

Proxies

Client proxies

LocalStrageProxy

HTML5のlocalStrageはドメインにデータをセットする。 ブラウザを閉じて開き直してもデタはlocalStrage上に保持されている。 これは開いているすべてのブラウザやタブからアクセスできる。

SessionStrageProxy

SessionStrageはウィンドウごと。ブラウザーを閉じたらデータはなくなる。 他のウィンドウがそのサイトを表示中でも同じ事。

Proxyにidを設定し忘れないこと。 idを指定しないときにはStoreのidが使われる。 Storeのidもなければエラーになる。

MemoryProxy

MemoryProxyの内容はページがリフレッシュする度になくなる。 テンポラリデータをロードするのに使われる。

Server proxies

AjaxProxy

Ext JS 3でのHttpProxy。 Ajax proxyをセットアップするには type: ‘ajax’とする。

  1. モデルのコンフィグの中にproxyを設定することができる。
  2. Ext.create()でもって、 proxyのインスタンスを生成してから それをproxyプロパティに設定する方法も使える。

1の方法では type: ‘ajax’ と url: ‘hoge/hoge.json’ だけでよいが、 2の方法では、modelとreaderのコンフィグが必要。 1の方法では、この二つはデフォルトで設定されている。

readリクエストをサーバーに送るとproxyは指定したurlにGETリクエストを送り、 writeリクエスト(update, insert, delete)の時はPOSTリクエストを送る。

filter, grouping などのオプションを設定した場合は、 リクエストパラメーターにそれが追加される。 リクエストパラメーター名を指定するコンフィグとデフォルト値は次のとおり。

  1. filterParam: ‘filter’
  2. groupParam: ‘group’
  3. pageParam: ‘page’
  4. startParam: ‘start’
  5. limitParam: ‘limit’
  6. sortParam: ‘sort’
  7. extraParam: その他のパラメーター

誤植発見：sortParam のところに The default value is group. ってかいてあるけど、 group ではなくて sort が正解。

Ext JS 4 では Ext.data.Operation を導入した。 それはproxyで実行されるそれぞれのreadまたはwriteオペレーション。 次のいくつかのオプションを設定できるけど、 直接使うことはめったにないよ。

action
実行したいアクション read, create, update, destroy
batch
オペレーションがExt.data.Batchオブジェクトの一部である
filters
フィルターの配列
group
グループコンフィグの配列。
limit
サーバーからロードしたいModelインスタンスの数
sorters
ソーターの配列
start
ページングを使ってロードするModelの最初の番号

filter, group, sorters, start はreadリクエストの時だけ使用できる。

sorterやfilterコンフィグは他のコンフィグと違って、単純な値ではなくJSONオブジェクト。 エンコードされてURLに追加される。

エンコードする形式を変更することも出来る。 それを実現するには、encodeSortersやencodeFiltersメソッドをカスタマイズする。

Rest proxy

Rest proxy を指定するには type コンフィグに ‘rest’ を指定する。

saveメソッドを呼び出すとproxyはPOSTリクエストを生成する。 saveされたらサーバーはidを返す。(返されたid=26とする)

loadメソッドでは、proxyはGETリクエストを /hoge/26 に送る。

updateメソッドでは、PUTリクエストを /hoge/26 に送る。

destroyメソッドでは、DELETEリクエストを /hoge/26 に送る。

JsonP proxy

違うドメインにリクエストする必要があるときに使います。

JsonP proxy で作られたリクエストの場合は、 サーバー側では単にJSONを返すだけではだめで、 callback関数を追加しなければならない。

Stores

Ext JS 3 ではStoreクラスはObservableクラスのサブクラス。 Ext JS 4 ではAbstractStoreクラスのサブクラス。 またStoreクラスはArrayStore, JsonPStore, JosnStore などの子クラスがある。

そういえば、これらの子クラス使ったこと無いなぁ。

Readers

Readerは、 ModelインスタンスやStoreにロードするようにサーバーからのデータをデコードするクラス。

Ext JS 3 と Ext JS 4 の大きな違いは、 Ext JS 4 ではReaderはStoreではなくて、proxyに結びつけられる。

Ext JS 3 ではReaderはExt.dataパッケージに所属していたが、 Ext JS 4 ではExt.data.readerパッケージに所属する。

Json reader の主なプロパティ

idProperty
Modelのidとなるプロパティ名。デフォルトは’id’
messageProperty
レスポンスメッセージが入るプロパティ名。
root
オブジェクトの配列が格納されるプロパティ名。
successProperty
success属性を格納するプロパティ名。デフォルトは’success’。
totalProperty
レコード数を格納するプロパティ名。デフォルトは’total’。

また誤植めっけ。croot –> root。

rootコンフィグを指定しない場合は、オブジェクトの配列が返される。

Xml proxyの場合は、

record コンフィグにレコードのタグの名前をセットする。 recordを包含するタグがある場合は rootコンフィグにそれを設定する。

Writers

Writerはサーバーにデータを送信する。 Ext JS 4 ではWriterもproxyに結びつけられる。 パッケージはExt.data.wirterに所属する。

nameProperty
キーとして使われるプロパティ名
writeAllFields
trueにした場合はサーバーに全てのデータが送られ、 falseにした場合は、変更されたフィールドだけが送られる。

JsonWriter

AjaxProxyを使う時には、apiというコンフィグにCRUDオペレーションのそれぞれのURLを指定する。

[js] api: { read: ‘data/hoge/read’, create: ‘data/hoge/create’, update: ‘data/hoge/update’, destroy: ‘data/hoge/delete’ } [/js]

新しいモデルを生成してStoreに挿入すると、 proxyはPOSTリクエストを生成して、api.readで指定されたURLに送る。 データはJSON形式で送られる。

XmlWriter

XmlWriterでも動作はほぼ同じ。

WriterはServer proxyでのみ使われます。local strage proxy の場合はproxyが読み書きの世話をします。

Sorting

[js] sorters: [ { property: ‘pages’, direction: ‘DESC’ }, { property: ‘numChapters’, direction: ‘ASC’ } ] [/js]

sort情報を後で変更することもできる。

[js] store.sort(‘subject’, ‘ASC’); [/js]

storeのsortプロパティが変更されたら、既存のsorterはすべて削除される。

上記はクライアントサイドでのソート。 サーバーサイドでソートすることもできる。

remoteSort: true

GETリクエストの際に、sortオブジェクトがURLに送信される。 サーバー側でこれを見てちゃんとソートして返さないといけない。

Filtering

フィルタリングもソートと同じようなやり方でできる。

[js] fileters: [ property: ‘subject’, value: ‘JAVA’ ] remoteFilter: true [/js]

という感じ。