初心者のためのExtJS入門スマートフォン用の表示で見る初心者のためのExtJS入門ExtJSを使うので、ついでにまとめていきます2017-01-25チュートリアル:削除処理の実装(modern)ExtJS今回はメモを削除できるようにします。削除だけだと、あまりにも内容が薄いので、少し細かい部分も実装します。削除ボタンは一覧画面に設置することにしました。FontAwesomeアイコンのxマークで削除ボタンを表現しています。メモ一覧リストクラス。メモ一覧ビューコントローラクラス。showscreenイベント時の処理。新規作成ボタンタップ時の処理。リストitemtapイベント時の処理。}});ボタンの位置はスタイルシートで調整します。↓のような内容で、sass/src/view/list/List.scssを作成しました(ベンダープレフィックスは手抜きです)。}}onItemTapの処理に、削除ボタンをタップされたかどうかの判定と削除処理を追加しています。判定方法は、classicの時と同じくタップした要素のセレクタ名で行っています。falseを追加しています。falseを返すと、itemtapイベントより先の処理を中断することができます。具体的には、行の選択に関する処理まで進まなくなり、タップしたときの背景色が付かなくなります。改行対応とHTMLエスケープ今回のネタ不足を補うために、本文に改行含みの文章を保存したときに一覧画面で表示するコードを紹介します。↑のような入力をした場合、一覧画面では次のようになります。そこで↓のようにします。メモ一覧リストクラス。}});itemTplは内部的にはExt.XTemplateになるため、その機能を使うことができます。その機能の一つとして、テンプレート内で使える関数を定義することができます。その方法は、配列の最後にオブジェクトリテラルを追加し、そこに関数を定義します。すると、{[this.xxx()]}のように記述することで、その関数を呼び出すことが可能です。{[...]}で記述する場合、valuesという予約変数から全ての値を参照できます。エスケープ処理は、Ext.String.htmlEncodeで用意されているので、それを使います。改行文字をに置き換えるのは一般的な方法で行っています。改行処理を、共通関数として用意しておくと、他の画面でも使えて便利になりますよ。↑のように、きれいに表示されるようになりました。メモ登録機能としては最低限のことができるようになったので、チュートリアルは今回で終わりにしようと思います。次回からはメモ登録とは関係ない機能を取り上げていこうと思います。(1)今回からExtJS6.5のフォームの変更点を挙げていきます。複数」といったデータモデル...2017-01-25チュートリアル:ルーティングを使って、SPA(シングルページアプリケーション)にする(modern)今回は、SPA対応のmodern版です。classicとほとんど同じ...2017-01-22チュートリアル:一覧画面を作成する(modern)これからclassicで作った画面の、modern版を作成していきます。(2)ツリーパネル[modern]任意のコンフィグを双方向バインディングに対応するスポットライト[classic]Googleマップアイコンフォントアイコンフォントのパッケージ作成suspendLayouts・resumeLayoutsES6で書いてみるExt.Deferredで非同期処理をまとめるビューモデルのデータにモデルを設定して使用するプラグインの作り方ミックスインの作り方ボタンのUIにバインディングできるように工夫するはてなブログをはじめよう!sham-memoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。