初心者のためのExtJS入門スマートフォン用の表示で見る初心者のためのExtJS入門ExtJSを使うので、ついでにまとめていきます2017-01-14チュートリアル:モデル、ストアを作成するExtJS今回はモデルとストアを作成します。これまではデータビューのstoreコンフィグでストアを簡易な形式で設定していましたが、これを別ファイルとして作成することにします。作成する前に、ファイルを整理します。app/Application.jsをclassic直下にコピーします。その後、appディレクトリに配置されているディレクトリ、ファイルをまるごと削除します。あと、classic/view/main/List.jsも使っていないので削除します。(なぜこんなことしてるのかについては、本記事最後の「補足」を参照ください)モデルモデルはclassic/src/modelディレクトリに作成していきます。Ext.data.Modelを継承し、モデルに必要なデータの定義はfieldsコンフィグに設定していきます。]});上記のような、メモを表す「メモモデル」を作成してみました。ストアストアはclassic/src/storeディレクトリに作成していきます。Ext.data.Storeを継承し、使用するモデルとプロキシを設定します。]});プロキシについて、ざっくり説明します。ような操作をどのような形式で行うかというのがプロキシで決まります。プロキシの種類としては、Ext.data.proxy.Ajax、Ext.data.proxy.JsonP、Ext.data.proxy.Memory、Ext.data.proxy.LocalStorageなど色々な種類があります(標準で提供されているのはExt.data.proxyパッケージにあるクラスです)。単純な非同期通信でサーバとデータのやり取りをしたいのであれば、Ext.data.proxy.Ajaxを使います。上記のコードでは、Ext.data.proxy.Memoryを使っています。これは、特に通信などを行わずメモリ上に残しておくだけになります(そのうち、Ext.data.proxy.LocalStorageに変えるつもりです)。データビューでストアを使うようにするまずはアプリケーションクラスのstoreコンフィグに作成したストアを設定します。アプリケーションクラス。]});ちなみにストアには「ストアID」という一意となるIDが付与されるようになっています。自動的に付与されるのはクラス名と同じ文字列です。最後にデータビューのstoreコンフィグを変更します。]});これで、ストアを別ファイルに分けることができました。今回、appディレクトリ以下のファイルを削除しました。これは私の場合ですが、appディレクトリは使用しません。最初、appにはclassicとmodernの共通処理のコードを作成すると説明しました。自動生成した時点では、ストアとモデルもappに作成するようにディレクトリが用意されています。実際の案件で使っていると、classicとmodernでは画面設計が違ったりすることが多く、全く同じストアとモデルを使えないことが多々あるため、最初から分けてしまうことにしています。共通処理が必要な場合は「パッケージ」を作って、そこに作成するようにしています。(1)今回はclassicのチャートです。チャートを使うための基...2017-01-25チュートリアル:削除処理の実装(modern)今回はメモを削除できるようにします。削除だけだと、あまりに...2017-01-22チュートリアル:一覧画面を作成する(modern)これからclassicで作った画面の、modern版を作成していきます。...2017-01-18チュートリアル:ルーティングを使って、SPA(シングルページアプリケーション)にする(2)今回はSPAの続きです。(2)ツリーパネル[modern]任意のコンフィグを双方向バインディングに対応するスポットライト[classic]Googleマップアイコンフォントアイコンフォントのパッケージ作成suspendLayouts・resumeLayoutsES6で書いてみるExt.Deferredで非同期処理をまとめるビューモデルのデータにモデルを設定して使用するプラグインの作り方ミックスインの作り方ボタンのUIにバインディングできるように工夫するはてなブログをはじめよう!sham-memoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。