初心者のためのExtJS入門スマートフォン用の表示で見る初心者のためのExtJS入門ExtJSを使うので、ついでにまとめていきます2017-01-20チュートリアル:ストアのプロキシを変更するExtJS今回はストアのプロキシをローカルストレージに変更します。これで、一応データを保存できるようになります。ローカルストレージにですが。(サーバ側が無いのでやむなし)ストアのプロキシ変更まずはストアのプロキシを変更して、ローカルストレージを使用するようにします。}});idはローカルストレージで使用する識別子になります。toolsで見てみると、下記のようにmemoというキーが自動的に用意されていることが分かります。保存処理をプロキシに合わせて変更ドキュメント(http://docs.sencha.com/extjs/6.2.1/classic/Ext.data.proxy.LocalStorage.html)を見ると分かりますが、ストアのsyncメソッドを呼び出すことでローカルストレージに反映されるので、保存処理を修正する必要があります。メモ登録のビューコントローラクラス。showscreenイベント時の処理。保存ボタンクリック時の処理。}});ついでにリファクタリングしてみました。(だいぶコードがすっきりしましたよ)syncを呼ぶまでは、メモリ上で変更しただけになります。syncを呼ぶことで初めてローカルストレージに書き込まれることに注意しましょう。一覧画面の表示時にデータをロードするあとは一覧画面を表示したときに、ローカルストレージからデータをロードする必要があります。いうときはshowscreenイベント時に処理できるようにしたのが便利に感じます。メモ一覧パネルクラス。メモ一覧データビュークラス。'メモは登録されていません。新しいメモは「新規作成」ボタンから作成できます。メモ一覧のビューコントローラクラス。showscreenイベント時の処理。新規作成ボタンクリック時の処理。データビューitemdblclickイベント時の処理。}});ついでにデータビューのemptyTextプロパティを設定して、メモが未登録のときにテキストを表示するようにしました。試しに登録してみます。登録してみると、ローカルストレージにmemo-1というキーのデータが追加されたのがわかります。ブラウザをリロードしてもデータが残るようになりました。ちなみにmemo-1はid=1のデータとなります。1件登録してみるとmemo-2が追加されるのが分かります。削除できるようにするメモを削除できるように削除ボタンを追加します。一覧画面に1件分を削除するボタンと全て削除するボタンの2種類用意していこうと思います。メモ一覧データビュークラス。'メモは登録されていません。新しいメモは「新規作成」ボタンから作成できます。メモ一覧のビューコントローラクラス。showscreenイベント時の処理。新規作成ボタンクリック時の処理。全て削除ボタンクリック時の処理。'全てのメモを削除します。データビューitemclickイベント時の処理。データビューitemdblclickイベント時の処理。}}基本的には、ストアから削除してからsyncメソッドを実行しています。1件の削除では、FontAwesomeのアイコンで削除ボタンを設置してみました(ExtJSのパッケージとして、はじめからfont-awesomeが用意されています)。データビューのitemclickイベントで削除ボタンをクリックしていたら削除するようにしています。onItemClickメソッドでは、Ext.flyを使っています。このメソッドの戻り値はExt.dom.Elementですが、これはHTMLElement、いわゆるDOMのラッパークラスです。Ext.dom.Elementの形式でDOMにアクセスすると、いろいろ便利なメソッドを使えるようになります。今回は、Ext.flyを使っていますが、Ext.getを使うこともできます。違いですが、イベントの割り当てなどが必要な場合はExt.getを使う必要があります。Ext.flyは一時的な参照の場合に使うようにドキュメントに記載があります。これはExt.flyはいろいろな箇所で呼ばれており、別の箇所で呼ばれると、その前のDOMへの参照やイベントは破棄されるようになっているためです。その分、Ext.flyのほうが処理は軽いという特性があります。あと、e.stopEventですが、内部的にはpreventDefaultとstopPropagationを実行してくれます。これでデータをローカルストレージに残せるようになり、また、削除もできるようにできました。17:25チュートリアル:ストアのプロキシを変更するTweet広告を非表示にする関連記事2017-01-25チュートリアル:削除処理の実装(modern)今回はメモを削除できるようにします。削除だけだと、あまりに...2017-01-25チュートリアル:ルーティングを使って、SPA(シングルページアプリケーション)にする(modern)今回は、SPA対応のmodern版です。classicとほとんど同じ...2017-01-18チュートリアル:ルーティングを使って、SPA(シングルページアプリケーション)にする(2)今回はSPAの続きです。(2)ツリーパネル[modern]任意のコンフィグを双方向バインディングに対応するスポットライト[classic]Googleマップアイコンフォントアイコンフォントのパッケージ作成suspendLayouts・resumeLayoutsES6で書いてみるExt.Deferredで非同期処理をまとめるビューモデルのデータにモデルを設定して使用するプラグインの作り方ミックスインの作り方ボタンのUIにバインディングできるように工夫するはてなブログをはじめよう!sham-memoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。