初心者のためのExtJS入門スマートフォン用の表示で見る初心者のためのExtJS入門ExtJSを使うので、ついでにまとめていきます2017-02-01グリッドの機能:カラム(列)[classic]ExtJS※チュートリアルの登録画面あたりに不具合があったので一部訂正しました。テストしていなかったので・・・。今回はグリッド(Ext.grid.Panel)の使い方です(チュートリアルで作ったメモアプリを流用しています)。何回かに分けてグリッドの機能を取り上げてみようと思っています。あと、classicに絞っています。modernはまた改めて・・・(ところでスマフォ表示でグリッドってそんなに使うのかな?)。グリッドは、http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#array-gridにあるように表形式を表現するのに便利なビューコンポーネントです。非常に多機能で、ソートや並べ替え、ページングなど色々なことができるので利用頻度が高いです。表示グリッドパネルを表示させる最低限のコードは、↓になります。storeとcolumnsを指定すれば、ひとまず表示はできます(データを出さなくても良いならcolumnsだけで表示できます)。メモ一覧グリッドクラス。]});データビューと同じようにstoreに使用するストアを設定します。columnsに列を定義します。上記コードだと、タイトルと本文の列が表示されます。タイトルは、width:250で幅を250ピクセルにしています。本文に設定しているflex:1で、タイトル部以外に余っている横幅を埋めるように目一杯広げるようになります。パネルの幅が狭いときには、かなりつぶれて表示されることもあるので、最低限の幅を持たせたいならminWidthを付けておくと良いかもしれません。これで表示はできました。このような最低限の状態でも、列見出し部分をクリックすれば並べ替えができたり、列の位置をドラッグ&ドロップで入れ替えたりできるようになっています。カラム(列)さきほどのコードにもありましたが、カラムの定義はcolumnsに設定します。カラムの機能を使って、さらに改良してみます。メモ一覧グリッドクラス。]});align、locked、rendererというプロパティと、Ext.grid.column.Dateというカラムの派生クラスを使ってみました。alignを使うと表示位置を設定できます。これでIDを右寄せにしました。lockedをtrueにすると、横スクロールがある場合に、列を固定することができます。Excelで列をロックするような感じになります。rendererには表示内容を変換するための関数を設定できます。これで値に応じて表示を柔軟に変更できます。上記コードでは、第1引数の値しか使っていませんが、引数の数はもう少しあります(http://docs.sencha.com/extjs/6.2.1/classic/Ext.grid.column.Column.html#cfg-renderer)。使うのは第3引数のrecordぐらいまでです。使うような機能はカラムの派生クラスとして用意されている場合があります。その一つがExt.grid.column.Dateです。これは日付項目のフォーマットに使えます。他にもExt.grid.column.NumberやExt.grid.column.Widgetなどがあります。Ext.grid.column.Widgetを使ってみる次はExt.grid.column.Widgetを試してみます。このカラムを使うとグリッド内にいろいろなビューを埋め込むことができます(http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#widget-grid)。ここではExt.grid.column.Widgetを使って削除ボタンを設置して1行のデータ削除をやってみました。メモ一覧グリッドクラス。'メモを1件削除します。]});widgetプロパティに表示したいコンポーネント設定します。'button'となっています。今回は例なので、handlerプロパティで直接ストアからデータを消すようにしています。Ext.grid.column.Widgetを使った場合、getWidgetRecordメソッドを使って対象行のモデルを取得できます。おまけにExt.grid.column.Templateを使ってみるこのクラスは知らなかったので試してみました。メモ一覧グリッドクラス。]});意味はないですが、IDとタイトルをExt.grid.column.Templateで出力するように変更してみました。複数項目をシンプルな形式で表示するのであれば、このクラスを使ったほうがスマートに書けそうです(今後は実務でも使っていこう)。カラムの段組columnsをネストすると、段組みできます。メモ一覧グリッドクラス。'メモを1件削除します。]});カラムの標準機能のON/OFFを変更するグリッドのカラムは最初から並べ替えや移動ができるのですが、列によっては使えないようにしたい場合があります。それには下記のプロパティを使います。移動の設定しばらくは、このような感じでグリッドの機能を取り上げていく予定です。22:59グリッドの機能:カラム(列)[classic]Tweet広告を非表示にする関連記事2017-08-19ツリーパネル[modern]今回はmodernのツリーパネルです。(2)今回はツリーグリッドを取り上げます。(2)今回もExtJS6.5のmodernグリッド改善点です。グリッドの各所に...2017-02-19グリッドの機能:編集[modern]今回はmodernのグリッド編集を試しました。(2)ツリーパネル[modern]任意のコンフィグを双方向バインディングに対応するスポットライト[classic]Googleマップアイコンフォントアイコンフォントのパッケージ作成suspendLayouts・resumeLayoutsES6で書いてみるExt.Deferredで非同期処理をまとめるビューモデルのデータにモデルを設定して使用するプラグインの作り方ミックスインの作り方ボタンのUIにバインディングできるように工夫するはてなブログをはじめよう!sham-memoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。