初心者のためのExtJS入門

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

ExtJS6.5

ワークスペース、パッケージの作成

Senchaコマンドを使って「ワークスペース」という構成を作成できます。 バックエンド用とフロントエンド用のプロジェクトが必要というような、ExtJSアプリケーションを複数作成する場合は特に便利です。 複数アプリケーションで共通のExtJS SDKやパッケージ…

(ExtJS6.5)細かい変更点

ようやく http://docs.sencha.com/extjs/6.5.0/guides/whats_new/whats_new.html は試し終えました。 d3やpivotパッケージはプレミアム機能は試せてないですが、そこは必要になったときに調べよう。 そういえば、ドキュメントのページも用意されているような…

(ExtJS6.5)チャート

今回はチャートの改善点です。 チャートはclassic、modernどちらも共通のパッケージを使用しています。そのため、classicでも恩恵に預かれます。 キャプション captionsコンフィグを使って、チャートのタイトル・サブタイトル・クレジットを簡単に設定できる…

(ExtJS6.5)パネル・ダイアログ[modern]

ExtJS6.5におけるパネルの変更点とダイアログ追加についてです。 パネル collapsibleコンフィグとresizableコンフィグが追加されました。classicではどちらも実装済みの機能です。 classicの場合はboolean型の値しか指定できませんが、modernではオブジェク…

(ExtJS6.5)フローティングメニューの追加・weightedコンフィグ[modern]

今回は小ネタ2つです。 メニュー これまでmodernのメニューといえば、ActionSheetを画面外からスライドイン(http://examples.sencha.com/extjs/6.5.0/examples/kitchensink/?modern#actionsheets)する形式がほとんどでしたが、今回classicのようなフローティ…

(ExtJS6.5)フォームの新機能[modern] (2)

今回までフォーム関連の新機能についてです。 デバイスに応じて日付フィールドの入力方法が切り替わる これまでmodernでの日付入力といえば、画面下部からスライドインするパネルでドラムをクルクル回して日付を選択するというものでした。 ExtJS6.5になって…

(ExtJS6.5)フォームの新機能[modern] (1)

今回からExtJS6.5のフォームの変更点を挙げていきます。 バリデーション バリデーションは大きく変わり、classicに寄せられました。 以前のバリデーション機能はモデル側で実装されており、フォームの各フィールドで設定できるのはごくわずかでした。 しかし…

(ExtJS6.5)associatedDataコンフィグ[modern]

ExtJS6.5で、Ext.dataview.AbstractクラスにassociatedDataコンフィグが追加されました。 Ext.dataview.Abstractは、リストやグリッドの基底クラスです。 リストやグリッドのようなデータビューのレンダリング処理では、ストアのモデルのデータをitemTplコン…

(ExtJS6.5)リストの新機能[modern]

今回はリストの追加機能を取り上げます。 行のスワイプ操作 Ext.dataview.listswiper.ListSwiperというプラグインクラスを使って、リストの行をスワイプするアクションが簡単に実装できるようになりました。 Ext.define('Sample.view.main.Main', { extend: …

(ExtJS6.5)グリッドの新機能[modern] (3)

今回もグリッドについてです。細かいところばかりなので、前回書いとけば良かったです。 Virtual Stores Ext.data.virtual.Storeというクラスが追加されたようです。 BufferedStoreと同じようなクラスであるとの記述があります。 管理するデータセットのうち…

(ExtJS6.5)グリッドの新機能[modern] (2)

今回もExtJS6.5のmodernグリッド改善点です。 グリッドの各所にアイコンボタンを設置できるようになった! スマフォやタブレットでお馴染みのアイコンのボタンを、グリッドの色々な箇所に設置できるようになりました。 Ext.define('Sample.view.main.Main', …

(ExtJS6.5)グリッドの新機能[modern] (1)

ExtJS6.5でmodernのグリッドにいくつか変更箇所があります。 今回は選択と編集を試してみました。 選択 Ext.grid.Gridのselectableコンフィグを使って、どういう選択を可能にするかを設定できるようになりました。 items: [{ xtype: 'grid', selectable: { c…