Ext JSとは

Extは7月6日(米国時間)、Ext JSの最新版となるExt JS 3.0をリリースした。

Ext JSはJavaScriptベースのWebアプリケーションフレームワーク。高い拡張性をそなえ、デスクトップアプリケーションと比較しても見劣りしないユーザインタフェースをWebブラウザ上で簡単に実現することができる。

同ライブラリは各種Commercial Licenses、OEM / Reseller License、GNU GENERAL PUBLIC LICENSE Version 3の複数ライセンスのもとで公開されているオープンソースソフトウェア。ライセンス体系や各種価格についてはLicensing Overviewを参照されたい。

Ext JS 3.0の概要については、「Exit JS 3.0登場、コーディングなしでUI開発するツール」や「Ext JS 3.0 - 2009年の早いタイミング、コアライブラリを差し替え」にて詳しくまとめられているので、併せて参照してほしい。

メジャーアップデートから1ヶ月ほど経過した同ライブラリ、本稿ではおさらいの意をこめExt JS 3.0のリリースノート再確認と、押さえておきたい新機能を簡単に紹介しよう。

Ext JS 3.0 リリースノート要約

今回のメジャーアップデートで変更や追加がおこなわれた機能は次のとおり。(Release Notes for Ext 3.0.0より抜粋、関連するAPI Documentationより要約)

動作の変更がおこなわれた機能

  • Ext.Button: BoxComponent化、スケール表示方法の変更
  • Ext.data.Store: baseParamsとload()時に指定するパラメータ名が同じ場合、上書きされるように
  • Ext.debug: デバッグコンソールの機能拡張
  • Ext.Element: autoHeight()の削除、各種メソッドのパラメータの変更/追加
  • Ext.EventManager: within()にallowEl引数が追加
  • Ext.form: validateValue()の仕様変更、buttonAlignのデフォルト値が「center」から「right」に変更
  • Ext.grid: Ext.grid.GridPanelのレンダラ追加
  • Ext.layout: 非表示または折り畳んでいる子要素にたいしてのレイアウトマネージャ動作仕様変更
  • Ext.lib.Ajax: W3C XMLHttpRequestの仕様に沿うようにExt.lib.Ajaxのコアアダプタファイルを変更
  • Ext.menu: Menuをコンポーネント化(親クラス: Container)、オプションの変更
  • Ext.MenuButton: Ext.MenuButton削除
  • Ext.StatusBar: ベースライブラリから削除され、Ext.uxへ
  • Ext.Toolbar: Toolbarの親クラスがBoxComponentからContainerへ
  • Ext.Tooltip: delegateオプションの追加
  • Ext.util.Format: ellipsis(), focus()にたいしてそれぞれ「word」「defer」パラメータ追加
  • Ext.ux.GMapPanel: Ext.ux.GMapPanelのxtypeを「gmappanel」に
  • Ext.ux.grid: Ext.ux.grid.CheckColumn、Ext.ux.grid.RowEditorのptypeをそれぞれ「checkcolumn」「roweditor」に
  • Ext.ux.TabCloseMenu: Ext.ux.TabCloseMenuのptypeを「tabclosemenu」に

非推奨となった要素が含まれている機能

  • Ext.data.Reader: ArrayReaderでidは非推奨オプションに - idIndexかidPropertyを使用すること
  • Ext.data.Store: idは非推奨オプションに - storeIdを使用すること、SimpleStoreはArrayStoreに変更
  • Ext.Element: getAttributeNS()は非推奨メソッドに - getAttribute()を使用すること
  • Ext.data.PagingMemoryProxy: Ext.ux.data.PagingMemoryProxyに
  • Ext.form.SpinnerField (remove xtype=spinner): Ext.ux.form.SpinnerField xtype=spinnerfieldに
  • Ext.grid: GroupSummary, HybridSummary, RowExpander, TableGridはExt.ux.gridに
  • Ext.Spotlight: Ext.ux.Spotlightに
  • Ext.tree: ColumnNodeUI, ColumnTreeはExt.ux.treeに
  • Ext.ux: Ext.ux.XmlTreeLoaderはExt.ux.tree.XmlTreeLoaderになど

あたらしく実装された機能

  • Ext: iterate()の追加、isNumber(), isString()といった型判定用メソッドの追加
  • Ext.BoxComponent: getWidth(), getHeight(), getOuterSize()の追加
  • Ext.Button: scale, iconAlign, arrowAlignオプションの追加
  • Ext.ButtonGroup: xtype「buttongroup」の追加
  • Ext.chart: チャート図を生成。用意されている形式は「Chart」「PieChart」「CartesianChart」「LinChart」ほか
  • Ext.Component: 各種機能の追加
  • Ext.ComponentMgr: isRegisteredメソッドの追加
  • Ext.Container: getメソッドの追加
  • Ext.data.Store: xtype「store」の追加、setBaseParamメソッドの追加など
  • Ext.data.writer
  • Ext.Direct: クライアント-サーバ間のデータ通信をより効率よくおこなうための実装
  • Ext.Element: mouseenter, mouseleaveイベントの追加
  • Ext.Error
  • Ext.FlashComponent
  • Ext.form: DisplayFieldコンポーネントの追加
  • Ext.grid: Columnをはじめとした各種クラスの追加
  • Ext.layout: HBoxLayout, VBoxLayoutクラスの追加
  • Ext.menu: Overflowの追加
  • Ext.Spacer: xtype「spacer」の追加
  • Ext.Toolbar: Toolbar Overflowの追加、overflowchangeイベントの追加
  • Ext.Tooltip: anchor, anchorOffset, anchorToTargetコンフィグの追加
  • Ext.util.Format: number(), numberRenderer(), plural()メソッドの追加
  • Ext.util.Observable: Observable.observeClassメソッドの追加
  • Ext.ux.GroupTab

リリースノートより一部を要約して紹介させていただいたが、ご覧のとおり膨大な量の機能追加・変更がおこなわれている。挙動の変更された機能について心当たりのあるデベロッパは、旧バージョンから3.0への移行時に注意が必要だ。

それではExt JS 3.0においてあたらしく実装された機能に焦点をおき、一部機能の使い勝手について紹介しよう。焦点を当てる機能は、先述した新機能のうち次の3点だ。

  • Extクラスの新規メソッド
  • Ext.chartの使い方
  • Ext.Directの概要