データパッケージは、アプリケーション内の情報の受信、デコード、および使用を担当します。 これは、ライブラリのこれらの部分の1つであり、多くの改善と追加が行われました。
パッケージはフレームワークの4番目のブランチ用に完全に書き直されましたが、一般的な概念は以前のバージョンから変更されていません。 今日は、このテクノロジーに精通し、その機能を確認します。
新機能
Ext JS 4のデータパッケージは43個のクラスで構成されていますが、残りの3つと比較して3つが特に重要です。これはModel 、Store、 Proxyです。 これらは、サテライトクラスとともにほとんどすべてのアプリケーションで使用されます。
モデルとリポジトリ
パッケージの基本要素はExt.data.Modelクラスで、モデルの操作を担当します。 モデルは、アプリケーション内の特定のデータのセットです。たとえば、電子ストアには、ユーザー、製品、注文のモデルがある場合があります。
最も単純化されたバージョンでは、モデルはフィールドとその値のセットです。 Ext JS 3で作業している人は、おそらくExt.data.Modelの前身であるExt.data.Recordクラスを使用していました。 モデルを作成する方法を見てみましょう。
Ext.regModel('User', { fields: [ {name: 'id', type: 'int'}, {name: 'name', type: 'string'} ] });
通常、モデルはリポジトリ（モデルインスタンスのセット）と組み合わせて使用されます。 ウェアハウスの宣言とデータのロードは簡単です。
new Ext.data.Store({ model: 'User', proxy: { type: 'ajax', url : 'users.json', reader: 'json' }, autoLoad: true });
アドレス 'users.json'からUsersモデルのインスタンスのセットをダウンロードするために行う必要があるのはそれだけです。 AjaxProxyを使用してウェアハウスを構成し、指定されたアドレスのデータを読み取り、データをトランスコードするExt.data.Readerクラスを使用しました。 この場合、サーバーはJSON形式で応答を返すため、応答を読み取るためにJsonReaderを準備しました。
ストレージを使用すると、ローカルとリモートの両方でデータをソート、フィルタリング、およびグループ化できます。 Ext JSの4番目のバージョンには、個別のGroupingStoreクラスがありません。これは、標準のストレージがレコードの複数のソート、フィルタリング、およびグループ化に適しているためです。
new Ext.data.Store({ model: 'User', sorters: ['name', 'id'], filters: { property: 'name', value : 'Ed' }, groupers: { property : 'age', direction: 'ASC' } });
作成したウェアハウスでは、データは最初に名前（フィールド名）でソートされ、次にフィールドIDでソートされます。 レコードはフィルターされ、「Ed」という名前のユーザーのみが残り、年齢（年齢フィールド）でグループ化されます。 必要に応じて、Store APIを使用して、並べ替え、フィルタリング、またはグループ化オプションをいつでも簡単に変更できます。
プロキシ
上記では、リポジトリがプロキシを使用してデータをロードする方法と、リーダークラスを使用してサーバーの応答を解析するようにプロキシを構成する方法を説明しました。 3番目のバージョンと比較して、Ext JS 4には構造上の変更が1つあります。リポジトリには、プロキシに移植されたReaderおよびWriterクラスへの参照が含まれなくなりました。 このアプローチにより、信じられないほどの利点が得られます。プロキシをモデルで直接指定できるようになりました。
Ext.regModel('User', { fields: ['id', 'name', 'age'], proxy: { type: 'rest', url : '/users', reader: { type: 'json', root: 'users' } } }); // new Ext.data.Store({ model: 'User' });
二重勝ちです。まず、Usersモデルで動作する各リポジトリが同じ方法でデータをロードする可能性が非常に高いため、リポジトリのProxy記述を複製する必要はありません。 次に、ストレージなしでモデルインスタンスをロードして保存できます。
// (User) var User = Ext.getModel('User'); var ed = new User({ name: 'Ed Spencer', age : 25 }); // , // - RestProxy, // POST /users ed.save({ success: function(ed) { console.log("Saved Ed! His ID is "+ ed.getId()); } }); // 123 - ( GET- /users/123) User.load(123, { success: function(user) { console.log("Loaded user 123: " + user.get('name')); } });
また、HTML 5の機能を使用するいくつかの新しいタイプのプロキシであるLocalStorageProxyとSessionStorageProxyに注目します。 古いブラウザはHTML 5の革新をサポートしていませんが、新しいプロキシは非常に有用であるため、多くのアプリケーションがその使用から利益を得るでしょう。 要件を満たすプロキシがない場合でも、独自のプロキシを作成できます。
コミュニケーションズ
モデルに追加される新機能はプロキシだけではありません。 新しいAssociations APIを使用して、モデル間の関係を定義できるようになりました。 ほとんどのアプリケーションは、非常に多くの異なるモデルで動作し、モデルは通常、適用されたロジックのレベルで相互接続されます。 ブログプラットフォームには、ユーザー、投稿、コメントのモデルを含めることができます。 各ユーザーはレコードを公開し、レコードはコメントを受け取ります。 モデル間の関係は次のように説明できます。
Ext.regModel('User', { fields: ['id', 'name'], hasMany: 'Posts' }); Ext.regModel('Post', { fields: ['id', 'user_id', 'title', 'body'], belongsTo: 'User', hasMany: 'Comments' }); Ext.regModel('Comment', { fields: ['id', 'post_id', 'name', 'message'], belongsTo: 'Post' });
異なるモデル間の関係を記述するタスクはそれほど複雑ではありません。 各モデルには、他のモデルとの関係をいくつでも記述でき、モデル自体は任意の順序で宣言できます。 モデルのインスタンスを受け取った後、関連データを追跡できます。たとえば、特定のユーザーが残したレコードへのすべてのコメントのログを受け取りたい場合、次の構成を使用できます。
// ID 123 User User.load(123, { success: function(user) { console.log("User: " + user.get('name')); user.posts().each(function(post) { console.log("Comments for post: " + post.get('title')); post.comments().each(function(comment) { console.log(comment.get('message')); }); }); } });
多対1の関係（hasMany）はそれぞれ、モデルに追加される新しい関数に変わります。 各ユーザーには多くのレコードがあることを示します。 この関係は、前のコードで見たuser.posts（）関数で説明されています。 この関数を呼び出すと、レコードモデルで動作するように設定されたVaultが返されます。 次に、コメントモデルとの多対1の関係が指定されているため、Notesモデルにはコメント（）関数があります。
おそらく、User.loadを呼び出すように「成功」ハンドラーを設定したという事実に驚いたでしょうが、ユーザーの投稿やコメントにアクセスしている間はそうしません。 すべてのデータは、リモートサーバーから非同期にダウンロードされると考えられています。 この事実は、特別な成功ハンドラを使用することを意味します。これは、上記の関数として、最終的なデータ読み込みが成功したときに自動的に呼び出されます。
関連データをダウンロードする
ライブラリは、モデル間の記述された関係に基づいて、1つの要求で関連データを自動的に認識して処理できます。 最初にユーザーのデータを要求し、次にレコードについて、さらに各コメントを要求した場合でも、1つのサーバー応答ですべての必要な情報を返すことができます。
{ id: 1 name: 'Ed', posts: [ { id : 12, title: 'All about data in Ext JS 4', body : 'One of the areas that has seen the most improvement in Ext JS 4...', comments: [ { id: 123, name: 'S Jobs', message: 'One more thing' } ] } ] }
任意のソースからデータを受信するようにプロキシモデルを簡単に構成でき、Readerクラスは最も複雑な応答形式に対処するのに役立ちます。 Ext JS 3以降、モデルとリポジトリは、フレームワーク内のコンポーネント、特にテーブル（グリッド）、ツリー（トレス）、フォーム（フォーム）で広く使用されています。
機会のデモンストレーション
小規模なオンラインデモを用意しました。 このアプリケーションは、記事で説明したものと同じモデルを使用しますが、コードはテストデータを処理します。 デモを1つのアーカイブにダウンロードして 、実験することもできます。 ライブラリ自体は現在ベータ版であるため、エラーが発生することがありますが、一般的に、データ処理パッケージは非常に安定しています。
Sencha TouchとExt JSの世界からさらに多くのニュースを学ぶには、月刊ニュースレターを購読することをお勧めします。通常、他のどこにも見つからない記事（ブログでも）が含まれています。