読者です 読者をやめる 読者になる 読者になる

初心者のためのExtJS入門

ExtJSを使うので、ついでにまとめていきます

ExtJS

アプリケーションで使用するExtJSのバージョンを上げる

ExtJS6.5がリリースされましたね。 https://www.sencha.com/blog/announcing-ext-js-6-5-and-sencha-cmd-6-5-ga/ いろいろ変更ありますが、modern向け機能の強化がうれしいです。 早速SDKとSenchaコマンドをダウンロードしたので、アプリケーションで使用す…

ダッシュボード[classic]

Ext.dashboard.Dashboardを使うと、業務系の画面でよくあるダッシュボードのUIを実現できます。 partsコンフィグに、適当なキー名でExt.dashboard.Partクラスのコンフィグを指定します。 さらにExt.dashboard.PartのviewTemplateコンフィグのitemsに表示した…

本番用のapp.jsでrequireの設定不足によるJSエラーが発生する場合の対処

ExtJSで良くあるのが、requireの記述漏れです。 本番用にsencha app buildで出力したファイルで動かしたら、↓のようなJSエラーが発生。この場合は、まずrequiresにクラス指定が漏れています。 Uncaught TypeError: c is not a constructor at eval (eval at …

チャート[classic] (3)

スタック形式の棒グラフ Ext.chart.series.Barのstackedコンフィグをtrueにすると、積み上げた形状の棒グラフを表現できます。 これを使うとデータを比較しやすくなります。 モデル、ストア 車の販売台数のデータでモデル、ストアを作成しました。(データ元:…

チャート[classic] (2)

今回はclassicのチャートの続きです。 いくつかチャートの種類を試してみます。 Ext.chart.series.Line 折れ線グラフです。 insetPaddingやinnerPaddingでチャートのパディングを調整しています。何らかの方法で表示を調整しないと、テキストがチャート外に…

チャート[classic] (1)

今回はclassicのチャートです。 まずはチャートを使うための基本を押さえておきます。 app.json チャートの機能は別パッケージになっているので、app.jsonのrequiresにチャートのパッケージ名chartsを指定します。 "requires": [ "charts" ] 実装イメージ Ex…

レイアウト[modern]

今回はmodernのレイアウトを取り上げます。 classicと説明が同じになっているところは、たぶん気のせいです。 Ext.layout.Default これは特にレイアウトを指定していない場合に適用されているデフォルトのレイアウトです。 この場合、単純にDOMを順番に配置…

レイアウト[classic] (3)

classicのレイアウトは最後です。 Ext.layout.container.Column アイテムコンポーネントを横に並べるレイアウトです。 端まで到達すると、floatのように自動的に折り返すところがHBoxと異なります。 /** * レイアウトColumnのパネル。 * * @class Sample.vie…

レイアウト[classic] (2)

続きです。 Ext.layout.container.Card アイテムコンポーネントを、layoutコンフィグを設定した親コンポーネントのサイズまで目一杯広げて設置するレイアウトです。 アイテムコンポーネントが複数ある場合は、インデックス番号がより小さい表示可能な(非表示…

レイアウト[classic] (1)

今回はclassicのレイアウトを取り上げます(何回かに分けます)。 レイアウトの種類によって、パネルやコンテナに設置するアイテムコンポーネントの配置が変わります。 レイアウトは、layoutコンフィグで設定します。 Ext.layout.container.Auto これは特にレ…

Ext.XTemplateの使い方

今回は、Ext.XTemplateを取り上げます。 Ext.XTemplateはテンプレート機能を提供してくれます。同じようなパターンの文字列を何度も作成する場合に便利です。 多くのjavascriptフレームワークでも実装されており、HTMLタグ文字列を作成するのに使われること…

多言語対応[classic]

今回は言語の切り替えを試してみます。 おおまかなポイントを列挙しました。 言語はプルダウンで選択する 選択した言語はローカルストレージで保持する ロケールファイルをロードしてから、ビューを作成する app.jsonの修正 localeの定義は消します。 ext-lo…

日本語化してみる[classic]

今回は日本語化してみましょう。 基本的に言語変更はオーバーライドで文字列を上書きするのですが、classicの場合、パッケージが用意されているので、まずはそれを使います。 /ext/classic/locale/overrides/の下に「af」「bg」といったディレクトリがありま…

モデルのアソシエーション

ExtJSのモデルは「1 対 1」「1 対 複数」といったデータモデル上の関係を持つことができます(アソシエーション機能)。 例えば、下のようなデータをモデルで取り扱う場合に使えます。 { "id": 100, "created": "2017/03/15 15:20:25", "user": { "id": 1, "na…

マテリアルテーマのボタンのUI[modern]

modernのテーマには、theme-materialを指定することでマテリアルデザインにできますが、ボタンのUIが通常のテーマとは若干異なります。 ボタンのuiコンフィグに指定できるのは、次のようなものになります。 Ext.define('Sample.view.main.Form', { extend: '…

バリデーション:classicのようにエラーテキストを画面に表示させる[modern]

modernの場合、標準で提供されている入力エラーの表示方法が乏しいです。 でも画面にも表示できたほうがUIとしては良いので、エラーテキストを入力フィールドの下に表示させてみました。 Ext.field.Textをオーバーライド まずはエラーテキストを表示するため…

独自バリデーションをExt.form.field.VTypesに追加する[classic]

よく使うようなバリデーションチェックは、Ext.form.field.VTypesに追加しておくと便利です。 追加したバリデーションは、alphaなどのようにvtypeで使えるようになります。 Ext.form.field.VTypesのオーバーライド オーバーライドクラスには、最低限、バリデ…

バリデーションチェック[classic]

今回はclassicのバリデーションチェックです。 入力フィールドの種類にも依りますが、基本的には↓の方法になると思います。 http://docs.sencha.com/extjs/6.2.1/classic/Ext.form.field.Text.html#ext-form-field-text_validation 今回は、特にvtypeとvalid…

グリッドの機能:サマリー[modern]

今回はグリッドのサマリー機能です。classicと同じように、グリッドの列の平均や合計を表示する行を追加できます。 サマリー表示にはExt.grid.plugin.SummaryRowプラグインクラスを使います。残念ながらドキュメントが全く整備されていませんでした(http://d…

グリッドの機能:ページング[modern]

modernのグリッドでページングしてみます。 Ext.grid.plugin.PagingToolbarを使ってページング用のツールバーを設置します。classicの場合はコンポーネントでしたが、modernの場合はプラグインになっています。 ストア まずはストアですが、これはclassicと…

グリッドの機能:編集[modern]

今回はmodernのグリッド編集を試しました。 とりあえず編集できるようにする Ext.grid.plugin.Editableが用意されていたので、まずは1カラムだけ編集するようにしてみました。 /** * 商品一覧グリッドクラス。 * * @class Sample.view.main.List * @extend E…

グリッドの機能:カラム(列)[modern]

今回はmodernのグリッドを試してみます。 modernのグリッドはExt.grid.Gridクラス(http://docs.sencha.com/extjs/6.2.1/modern/Ext.grid.Grid.html)です。classicの場合とクラス名が異なるみたいです。あと、パネルクラスを継承していないので注意が必要です…

グリッドの機能:ページング[classic]

Ext.toolbar.Pagingを使って、グリッドをページング対応してみます。 まずは普通のグリッドを作成 ↓のようなモデルとストアを作成しました。(今はストアにautoLoad: trueを設定してます) /** * 商品モデルクラス。 * * @class Sample.model.Item * @extend E…

グリッドの機能:グルーピング・サマリー[classic]

グリッドのグルーピングとサマリーの機能を試します。 今回は注文一覧を会社ごとにグルーピングし、売上金額の小計を表示させます。 モデルとストア そのため、↓のようなモデル、ストアを用意しました。 /** * 注文モデルクラス。 * * @class Sample.model.O…

グリッドの機能:選択方法(セレクションモデル)[classic] (2)

Ext.grid.selection.SpreadsheetModelでExcelっぽい感じにできるので、今回はこれを試してみました(一度も使ったことがなかったので、ただの好奇心です)。 /** * メモ一覧グリッドクラス。 * * @class Memo.view.list.Grid * @extend Ext.grid.Panel */ Ext.…

グリッドの機能:ドラッグ&ドロップ[classic]

Ext.grid.plugin.DragDropプラグインを使うと、グリッドの行をドラッグ&ドロップで操作できます。 プラグインを組み込む /** * メモ一覧グリッドクラス。 * * @class Memo.view.list.Grid * @extend Ext.grid.Panel */ Ext.define('Memo.view.list.Grid', { …

クラスのオーバーライド

今回はクラスのオーバーライドです。 クラスをオーバーライドすると、対象クラスのメソッドを上書きしたり、プロパティやメソッドを追加したりできます。 私がオーバーライドを使うのは↓のような場合です。 フレームワークが提供しているクラスに不具合があ…

グリッドの機能:選択方法(セレクションモデル)[classic] (1)

Ext.grid.PanelのselModelコンフィグを指定すると、グリッドの行選択方法を変更できます。 ここにはセレクションモデル(Ext.selectionにあるクラス)を指定でき、主に下記3種類を使うと思います。 セル選択(Ext.selection.CellModel) 行選択(Ext.selection.R…

グリッドの機能:編集[classic]

今回はグリッド上での編集機能です。 編集機能はプラグイン(のクラス)で提供されています。グリッド用のプラグインはExt.grid.pluginにあり、編集可能にするにはCellEditing(セル編集)とRowEditing(行編集)を使います。 セル編集 グリッドの1マスずつ編集す…

グリッドの機能:カラム(列)[classic]

※チュートリアルの登録画面あたりに不具合があったので一部訂正しました。あまりテストしていなかったので・・・。 さて、今回はグリッド(Ext.grid.Panel)の使い方です(チュートリアルで作ったメモアプリを流用しています)。 何回かに分けてグリッドの機能を…

テーマの変更

テーマは、アプリケーション全体のデザインのことを指します。 テーマの設定 app.jsonの↓にあるthemeプロパティで使用するテーマを設定します。 "builds": { "classic": { "toolkit": "classic", "theme": "theme-triton", "sass": { "generated": { "var": …

アプリケーションを本番用にビルドする

今回の話題はビルドです。 ビルドコマンド 開発途中は↓のコマンドを使います。チュートリアルでも、このコマンドを使っていました。このコマンドは簡易的なビルドとサーバ起動を行ってくれます。 sencha app watch [classic|modern] 本番環境で稼働させる場…

チュートリアル:削除処理の実装(modern)

今回はメモを削除できるようにします。 削除だけだと、あまりにも内容が薄いので、少し細かい部分も実装します。 削除ボタンの設置と削除処理 削除ボタンは一覧画面に設置することにしました。 FontAwesomeアイコンのxマークで削除ボタンを表現しています。 …

チュートリアル:ルーティングを使って、SPA(シングルページアプリケーション)にする(modern)

今回は、SPA対応のmodern版です。 まあ、classicとほとんど同じなのですが。。。 ルーティングの設定 メインパネルにビューコントローラを設定し、そのビューコントローラにルーティングを定義します。 /** * メインパネルクラス。 * * @class Memo.view.mai…

チュートリアル:登録画面の作成(modern)

次に登録画面を作成します。 まだビューコントローラとビューモデルは作成せず、ビュー部分だけ作ってみます。 /** * メモ登録フォームパネルクラス。 * * @class Memo.view.regist.Panel * @extend Ext.form.Panel */ Ext.define('Memo.view.regist.Panel',…

チュートリアル:一覧画面を作成する(modern)

これからclassicで作った画面の、modern版を作成していきます。 まずはメモ一覧画面です。 モデル、ストアを作成する ここはclassicのときと同じです。ただし、プロキシを一旦memoryに戻します。 ビューコントローラを作る頃に、またlocalstorageにします。 …

チュートリアル:モバイル向けの画面を作成してみる

前回までで、メモを残せるアプリケーションがおおよそ完成しました。 しかし、それはあくまでPCブラウザ向けです。 今回からは、モバイル向けの画面を作ってみます。(ちなみに、チュートリアルはモバイル向けまで完成したら終わりにするつもりです) 予備知識…

チュートリアル:ストアのプロキシを変更する

今回はストアのプロキシをローカルストレージに変更します。 これで、一応データを保存できるようになります。ローカルストレージにですが。。。(サーバ側が無いのでやむなし) ストアのプロキシ変更 まずはストアのプロキシを変更して、ローカルストレージを…

チュートリアル:ルーティングを使って、SPA(シングルページアプリケーション)にする(2)

今回はSPAの続きです。 ルーティングで画面を切り替える部分は実装しましたが、残りの部分を修正していきます。 新規作成、編集のURLパターンを分ける 登録画面のパターンとしては、新規作成と編集の2つがあります。 そこで、下記のようにしてみます。 #regi…

チュートリアル:ルーティングを使って、SPA(シングルページアプリケーション)にする(1)

今回は、メモ一覧とメモ入力フォームを別の画面に分けて、ルーティングを使って画面遷移できるようにします。 ルーティングは、URLのパターンで処理を切り替える機能です。これを使ってSPAにします。 最終的には、http://localhost:1841/#listにアクセスした…

チュートリアル:ビューモデルを使って、フォームパネルを編集に対応させる

今回は、保存しているメモを編集できるようにしたい、という内容です。 編集したいメモを選択すると入力フォームに転記されて保存ボタンを押すと編集内容が反映される、といったかんじにしようと思います。 これだけだと、メモを選択したあとに、新規登録に…

チュートリアル:モデル、ストアを作成する

今回はモデルとストアを作成します。 これまではデータビューのstoreコンフィグでストアを簡易な形式で設定していましたが、これを別ファイルとして作成することにします。 事前準備 作成する前に、ファイルを整理します。 まずはapp/Application.jsをclassi…

チュートリアル:スタイルを整える

現在の画面は↓なかんじになっているわけですが。。。 これを見て気付くことがあります。。。そうダサいですね。こんなものを使うわけありません。 ということで、今回はスタイルを整えてみます。 layoutを指定する まずはlayoutコンフィグを指定して、画面の…

チュートリアル:フォームパネルの機能を使う

フォームパネルの機能を使ってリファクタリング まずはフォームパネル(Ext.form.Panel)の機能を使って、さらにリファクタリングします。 /** * ビューポートクラス。 * * @class Memo.view.main.Main * @extend Ext.Panel */ Ext.define('Memo.view.main.Mai…

チュートリアル:referenceを使って参照する

フォームの入力欄をカスタマイズすることにしました。 入力項目は「タイトル」「本文」の2つです(だんだんメモ登録っぽくしていってます)。 /** * ビューポートクラス。 * * @class Memo.view.main.Main * @extend Ext.Panel */ Ext.define('Memo.view.main.…

チュートリアル:ビューコントローラを使う

ExtJSには、ビューコントローラという機能があります。これによってボタン押したり行を選択したりした場合のイベント発火時の処理をビューから切り離すことができます。 前に定義した保存ボタンクリック時の処理を、ビューコントローラに移してみました。 ま…

チュートリアル:基本的なコンポーネントを使ってみる

コンポーネントの配置 Example(http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#components)を見ながら、ExtJSが標準で提供しているコンポーネントを試してみました。 どんなものがあるかは、Exampleを見るのが一番だと思います。 /** * ビュ…

チュートリアル:ビューポートを変更してみる

senchaコマンドでExtJSアプリケーションの雛型を作成しました。app, classicなどのディレクトリやapp.jsonなどのファイルが自動的に作成されています。ここからは具体的に作りながら覚えていきましょう。まずは慣れたいので浅い説明だけしていきます。 まず…

ExtJSを導入する

ExtJSはSenchaが提供しているWebページのフロントエンド用フレームワークです。グリッドやチャートなど高機能なUI部品が多数用意されており、私はとても便利に感じています。どういう表現が可能になるかはサンプルで確認できます(http://examples.sencha.com…