ExtJSExtJS2019-03-10ExtJS6.6の新機能ExtJS最後の更新からかなり間が空きました。ExtJS6.6を触ったので追加機能のうち大き目っぽい2つだけ取り上げます(執筆の途中でExtJS6.7が出たようで、ちょっと今更感ありますが。ext-genというNodeモジュールでアプリケーション...ExtJS6.6の新機能2018-02-20ボタンのUIにバインディングできるように工夫するExtJSボタンのテキストやUIをデータバインディングで変更したいときがあります。テキストははじめからできるようになっているのですが、なぜかUIはできるようになっていません(注意:ExtJS6.5.2時点までの話です)。根本的なところはsetUiメソッドが定義されてい...ボタンのUIにバインディングできるように工夫する2018-01-08ミックスインの作り方ExtJS今回はミックスインを作ってみます。ミックスインは、利用するクラスにメソッド、プロパティを追加して利用できるようにするもので、同じような機能が必要になる場合に有用です。プラグインに似ていますが、下記の違いがあります。プラグインの場合はp...ミックスインの作り方2017-12-02プラグインの作り方ExtJS今回はプラグインを作ってみます(まあ、プラグインを自作しないといけない場面はあまり無いと思いますが...)。プラグインは、コンポーネントに機能を追加するものです。プラグインのクラスはExt.plugin.Abstractを継承して作成します。作成したプラグイン...プラグインの作り方2017-11-12ビューモデルのデータにモデルを設定して使用するExtJSビューモデルに、データのモデルを設定することがあります。今回は、その際の使い方や注意点を取り上げます。使用するモデルやデータは下記の通りです。Promiseによる非同期処理をまとめる機能が存在します。複数のロードが必要な場合にコールバック地獄とならないようにする、最近ではお馴染みの手法ですね。ロード終了まで画面をマスクしたり、ロードのタイミングを調整したりするのに...Ext.Deferredで非同期処理をまとめる2017-10-29ES6で書いてみるExtJSExtJS6のコードを、ES6を使って書いてみました。classキーワードではクラス宣言できないので(もし出来るようになっているならぜひ教えてください!!)、そこはExt.defineを使います。メソッド定義などはES6の形式で記述できます。他、あえていくつか...ES6で書いてみる2017-10-15suspendLayouts・resumeLayoutsExtJS今回はExt.suspendLayouts、Ext.resumeLayoutsでレンダリングのチューニングを試してみます。これを使うとDOMのレンダリングをまとめられます。Ext.suspendLayoutsを呼び出すと、フレームワーク内部で持っているレイアウト中断のカウンタがインクリメント...suspendLayouts・resumeLayouts2017-10-01アイコンフォントのパッケージ作成ExtJS前回はアイコンフォントの使い方を取り上げましたが、今回はアイコンフォントのパッケージを作成してみます。標準のアイコンフォントだと思っているものが見つからないことがあります。その場合、デザイナーに作ってもらったり、自分で適当なアイコン画像...アイコンフォントのパッケージ作成2017-09-23アイコンフォントExtJSExtJS6.5では、FontAwesomeとPictosがパッケージに含まれています。今回はそれらの使い方を取り上げます。app.jsonでアイコンフォントのパッケージをrequiresに追記します。あとはclass属性に使用し...アイコンフォント2017-09-09GoogleマップExtJS今回はExtJSからGoogleマップを表示してみます。classicでは、Ext.ux.GMapPanelを使います(http://docs.sencha.com/extjs/6.5.1/classic/Ext.ux.GMapPanel.html)。これはindex.htmlか、Ext.Loader.loadSc...Googleマップ2017-09-03スポットライト[classic]ExtJS今回はExt.ux.Spotlightの紹介です。Exampleを眺めていたら見つけて試したくなりました(http://examples.sencha.com/extjs/6.5.1/examples/classic/core/spotlight.html)。これを使うと、特定の要素を目立たせることができます。Ext.ux.Spotlight...スポットライト[classic]2017-08-26任意のコンフィグを双方向バインディングに対応するExtJSビュー作成時に独自のコンフィグを追加することがあります。ここでは追加したコンフィグをデータバインディングしてみます。applyT...任意のコンフィグを双方向バインディングに対応する2017-08-19ツリーパネル[modern]ExtJS今回はmodernのツリーパネルです。できることはclassicのツリーパネルとほぼ同じです。モデルとストアはclassicのときと同じものを使っています。ビューにはExt.grid.TreeとExt.list.Treeを使えます。(2)ExtJS今回はツリーグリッドを取り上げます。Ext.tree.Panelクラスを使うと、ツリーパネルとグリッドパネルを一緒にしたようなツリーグリッドUIを利用できます。(1)ExtJS今回はclassicのツリーパネルを取り上げます。ツリーパネルでは、エクスプローラでディレクトリやファイルの位置関係を階層構造で表現するUIを提供できるビューです。(1)2017-07-17レスポンシブ対応ExtJS今回はレスポンシブ対応を試してみます。CSSではメディアクエリを使ってレスポンシブ対応しますが、ExtJSではExt.plugin.Responsiveクラスを使いjavascript上で処理します。ExtJS6.5Senchaコマンドを使って「ワークスペース」という構成を作成できます。バックエンド用とフロントエンド用のプロジェクトが必要というような、ExtJSアプリケーションを複数作成する場合は特に便利です。d3やpivotパッケージはプレミアム機能は試せてないですが、そこは必要になったときに調べよう。ExtJS6.5今回はチャートの改善点です。チャートはclassic、modernどちらも共通のパッケージを使用しています。そのため、classicでも恩恵に預かれます。ExtJS6.5ExtJS6.5におけるパネルの変更点とダイアログ追加についてです。collapsibleコンフィグとresizableコンフィグが追加されました。classicではどちらも実装済みの機能です。ExtJS6.5今回は小ネタ2つです。ExtJS6.5今回までフォーム関連の新機能についてです。これまでmodernでの日付入力といえば、画面下部からスライドインするパネルでドラムをクルクル回して日付を選択するというものでした。ExtJS6.5今回からExtJS6.5のフォームの変更点を挙げていきます。バリデーションは大きく変わり、classicに寄せられました。以前のバリデーション機能はモデル側で実装されており、フォームの各フィールドで設定できるのはごくわずかでした。ExtJS6.5ExtJS6.5で、Ext.dataview.AbstractクラスにassociatedDataコンフィグが追加されました。Ext.dataview.Abstractは、リストやグリッドの基底クラスです。ExtJS6.5今回はリストの追加機能を取り上げます。Ext.dataview.listswiper.ListSwiperというプラグインクラスを使って、リストの行をスワイプするアクションが簡単に実装できるようになりました。ExtJS6.5今回もグリッドについてです。細かいところばかりなので、前回書いとけば良かったです。Ext.data.virtual.Storeというクラスが追加されたようです。BufferedStoreと同じようなクラスであるとの記述があります。ExtJS6.5今回もExtJS6.5のmodernグリッド改善点です。スマフォやタブレットでお馴染みのアイコンのボタンを、グリッドの色々な箇所に設置できるようになりました。ExtJSExtJS6.5でmodernのグリッドにいくつか変更箇所があります。今回は選択と編集を試してみました。Ext.grid.Gridのselectableコンフィグを使って、どういう選択を可能にするかを設定できるようになりました。(1)2017-05-20アプリケーションで使用するExtJSのバージョンを上げるExtJSExtJS6.5がリリースされましたね。変更ありますが、modern向け機能の強化がうれしいです。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。