初心者のためのExtJS入門スマートフォン用の表示で見る初心者のためのExtJS入門ExtJSを使うので、ついでにまとめていきます2017-03-27Ext.XTemplateの使い方ExtJS今回は、Ext.XTemplateを取り上げます。Ext.XTemplateはテンプレート機能を提供してくれます。同じようなパターンの文字列を何度も作成する場合に便利です。多くのjavascriptフレームワークでも実装されており、HTMLタグ文字列を作成するのに使われることが多くです。ExtJSでも同様に、多くのコンポーネントクラスの実装で使われており、使えるようになるとExtJSでの開発が非常に楽になります。使ってみるこれは挨拶の文字列を出力する簡単なサンプルです。'山田太郎'});console.log(str);基本的な使い方は↓です。Ext.XTemplateのコンストラクタにテンプレート用の文字列を渡す。applyメソッドに埋め込みデータを渡すapplyメソッド以外にもデータを渡すためのメソッドは存在しますが、単純な文字列を返す場合はapplyメソッドを使います。条件分岐データの内容によって、テンプレート文字列で条件分岐することができます。テンプレート文字列でを使うと、if内がtrueの場合、囲った部分が出力されます。'やまだたろう'});console.log(str);上記のサンプルでは、埋め込みデータにkanaがあれば、ふりがなを括弧付きで出力します。applyメソッドに渡すオブジェクトリテラルからkanaを消してみると、括弧部分も表示されなくなります。大小関係を条件にする場合は、下記のようになります。500});console.log(str);これを実行するとサイズは「中」と出力されます。ついでに使いましたが、elseifやelseで複数条件を指定することもできます。繰り返しを使って、配列なども繰り返し処理できます。]});console.log(str);forには、繰り返し処理するデータのプロパティ名を指定します。すると、内では、繰り返し処理中の1件分が処理のスコープとなり、サンプルのように直接{name}や{price}が指定できます。親のデータにアクセスしないといけない場合は、parentを通して取得します。]});console.log(str);ループのインデックス番号などもアクセスできます。インデックス番号の場合は「xindex」です。他にもあるのでドキュメントを参照してみてください(http://docs.sencha.com/extjs/6.2.1/modern/Ext.XTemplate.html)。%}は、出力を伴わないような制御処理で使えます。出力まで伴う場合には、{[...]}を使うことができます(次のセクション)。計算処理やメソッド定義テンプレート内で同じような判定や計算があれば、メソッドにまとめることができます。]});console.log(str);Ext.XTemplateの最後にオブジェクトリテラルでメソッドを定義することができます。出力させる場合は{[...]}に記述します。定義したメソッドはExt.XTemplateのメンバーメソッドになるので、thisキーワードから実行します。埋め込みデータはvaluesに格納されているので、そこを経由してアクセスできます。ifでもメソッドを使えるので、条件が複雑な場合はメソッドを定義すると便利です。コンポーネントで使ってみる最後にコンポーネントで使ってみましょう。'Ext.XTemplateを紹介しています。<br>便利な機能なのでぜひ使ってみてください。}});上記の場合は、tplコンフィグがテンプレート文字列、dataコンフィグがそれに埋め込むデータとなります。dataが設定されると、内部でExt.XTemplateが使われてDOMが生成・更新されるようになっているのです。00:32Ext.XTemplateの使い方Tweet広告を非表示にする関連記事2017-04-30本番用のapp.jsでrequireの設定不足によるJSエラーが発生する場合の対処ExtJSで良くあるのが、requireの記述漏れです。複数」といったデータモデル...2017-02-01グリッドの機能:カラム(列)[classic]※チュートリアルの登録画面あたりに不具合があったので一部訂正...2017-01-25チュートリアル:削除処理の実装(modern)今回はメモを削除できるようにします。削除だけだと、あまりに...2017-01-18チュートリアル:ルーティングを使って、SPA(シングルページアプリケーション)にする(2)今回はSPAの続きです。(2)ツリーパネル[modern]任意のコンフィグを双方向バインディングに対応するスポットライト[classic]Googleマップアイコンフォントアイコンフォントのパッケージ作成suspendLayouts・resumeLayoutsES6で書いてみるExt.Deferredで非同期処理をまとめるビューモデルのデータにモデルを設定して使用するプラグインの作り方ミックスインの作り方ボタンのUIにバインディングできるように工夫するはてなブログをはじめよう!sham-memoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。