初心者のためのExtJS入門

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

ExtJS

ExtJS6.6の新機能

最後の更新からかなり間が空きました。 ようやくExtJS6.6を触ったので追加機能のうち大き目っぽい2つだけ取り上げます(執筆の途中でExtJS6.7が出たようで、ちょっと今更感ありますが。。) ext-genコマンド ext-genというNodeモジュールでアプリケーション…

ボタンのUIにバインディングできるように工夫する

ボタンのテキストやUIをデータバインディングで変更したいときがあります。 テキストははじめからできるようになっているのですが、なぜかUIはできるようになっていません(注意:ExtJS6.5.2時点までの話です)。 根本的なところはsetUiメソッドが定義されてい…

ミックスインの作り方

今回はミックスインを作ってみます。 ミックスインは、利用するクラスにメソッド、プロパティを追加して利用できるようにするもので、同じような機能が必要になる場合に有用です。 プラグインに似ていますが、下記の違いがあります。 1. プラグインの場合はp…

プラグインの作り方

今回はプラグインを作ってみます(まあ、プラグインを自作しないといけない場面はあまり無いと思いますが...)。 プラグインは、コンポーネントに機能を追加するものです。 プラグインのクラスはExt.plugin.Abstractを継承して作成します。 作成したプラグイン…

ビューモデルのデータにモデルを設定して使用する

ビューモデルに、データのモデルを設定することがあります。 今回は、その際の使い方や注意点を取り上げます。 使用するモデルやデータは下記の通りです。 Ext.define('Sample.model.Company', { extend: 'Ext.data.Model', fields: [ { name: 'id', type: '…

Ext.Deferredで非同期処理をまとめる

ExtJSでもDeferred, Promiseによる非同期処理をまとめる機能が存在します。 複数のロードが必要な場合にコールバック地獄とならないようにする、最近ではお馴染みの手法ですね。 ロード終了まで画面をマスクしたり、ロードのタイミングを調整したりするのに…

ES6で書いてみる

ExtJS6のコードを、ES6を使って書いてみました。 まだclassキーワードではクラス宣言できないので(もし出来るようになっているならぜひ教えてください!!)、そこはExt.defineを使います。 メソッド定義などはES6の形式で記述できます。他、あえていくつか…

suspendLayouts・resumeLayouts

今回はExt.suspendLayouts、Ext.resumeLayoutsでレンダリングのチューニングを試してみます。 これを使うとDOMのレンダリングをまとめられます。 Ext.suspendLayoutsを呼び出すと、フレームワーク内部で持っているレイアウト中断のカウンタがインクリメント…

アイコンフォントのパッケージ作成

前回はアイコンフォントの使い方を取り上げましたが、今回はアイコンフォントのパッケージを作成してみます。 標準のアイコンフォントだと思っているものが見つからないことがあります。 その場合、デザイナーに作ってもらったり、自分で適当なアイコン画像…

アイコンフォント

ExtJS6.5では、FontAwesomeとPictosがパッケージに含まれています。 今回はそれらの使い方を取り上げます。 まずはapp.jsonでアイコンフォントのパッケージをrequiresに追記します。 "requires": [ "font-awesome", "font-pictos" ] あとはclass属性に使用し…

Googleマップ

今回はExtJSからGoogleマップを表示してみます。 classicでの使い方 classicでは、Ext.ux.GMapPanelを使います(http://docs.sencha.com/extjs/6.5.1/classic/Ext.ux.GMapPanel.html)。 まずは、をロードしておきます。これはindex.htmlか、Ext.Loader.loadSc…

スポットライト[classic]

今回はExt.ux.Spotlightの紹介です。 Exampleを眺めていたら見つけて試したくなりました(http://examples.sencha.com/extjs/6.5.1/examples/classic/core/spotlight.html)。 これを使うと、特定の要素を目立たせることができます。 使い方 Ext.ux.Spotlight…

任意のコンフィグを双方向バインディングに対応する

ビュー作成時に独自のコンフィグを追加することがあります。 ここでは追加したコンフィグをデータバインディングしてみます。 Ext.define('Sample.view.sample.Panel', { extend: 'Ext.panel.Panel', xtype: 'sample_panel', config: { text: null }, applyT…

ツリーパネル[modern]

今回はmodernのツリーパネルです。 できることはclassicのツリーパネルとほぼ同じです。 基本的な使い方 モデルとストアはclassicのときと同じものを使っています。 ビューにはExt.grid.TreeとExt.list.Treeを使えます。 ビュー まずはExt.grid.Treeを使った…

ツリーパネル[classic] (2)

今回はツリーグリッドを取り上げます。 基本的な使い方 Ext.tree.Panelクラスを使うと、ツリーパネルとグリッドパネルを一緒にしたようなツリーグリッドUIを利用できます。 基本的な使い方はツリーパネルと同じで、それに加えてExt.tree.Panelクラスのcolumn…

ツリーパネル[classic] (1)

今回はclassicのツリーパネルを取り上げます。 ツリーパネルでは、エクスプローラでディレクトリやファイルの位置関係を階層構造で表現するUIを提供できるビューです。 modernにも同じようなビューがありますが、classicとはクラス名が異なるため今回はclass…

レスポンシブ対応

今回はレスポンシブ対応を試してみます。 CSSではメディアクエリを使ってレスポンシブ対応しますが、ExtJSではExt.plugin.Responsiveクラスを使いjavascript上で処理します。 ExtJSのコードをざっと見た感じでは、resizeイベント発火を起点にしているようで…

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

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…

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

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