| Ext JS |
Ext JS
「Ext JS」とは、JavaScriptによるユーザーインタフェースのライブラリ。元は「Yahoo! UI Library」を拡張した「yui-ext」のベースを、「Yahoo! UI Library」だけでなく「prototype.js」や「jquery」とも切り替え可能にしたライブラリ。「Ext 1.1」からはスタンドアロンでも利用できるようになった。完成度の高さからAIRやiPhoneのサンプルプログラムでも利用されている。
| バージョン | 追加機能 |
| yui-ext | 「Yahoo! UI Library」の拡張ライブラリ。 |
| Ext 1.0 | ベースを「YUI」だけでなく「prototype.js」や「jquery」とも切り替え可能になる。 |
| Ext 1.1 | ベースを「YUI」「prototype.js」「jquery」なしでスタンドアロンで実行できるようになる。 |
| Ext 2.0(Alpha) | デスクトップアプリケーション向けのユーザーインタフェースも追加される。 |
| 情報源 |
リンク
| 開発ツールの準備 - クライアント |
Ext 1.1
Extのライブラリとドキュメント一式。
ライセンスはLGPL。こちらの方の日本語訳も参考になる。
サイトからダウンロードして解凍し、任意のフォルダに配置。
Aptana
HTML/JavaScript/CSSのエディタとして利用。無償で利用可能。
インストーラの指示に従ってインストール。
※コードアシストの機能は残念ながら自分の環境ではAptanaが落ちる原因となるのでオフにしている。
Firebug
FireFoxのJavaScriptデバッグ用プラグイン。
デバッグ用の命令は次の通り。
| console.log('テキスト'); | ログ |
| console.info(オブジェクト); | 情報 |
| console.warn('テキスト'); | 警告 |
| console.error('テキスト'); | エラー |
| console.time('テキスト'); console.timeEnd('テキスト'); |
時間計測 |
IEerbug
IEでFirebugに近い機能を利用できるようにするためのスクリプト。無償で利用可能。
HTMLにieerbug.jsを埋め込む必要がある。
| <script src="ieerbug/ieerbug.js"></script> |
| 開発ツールの準備 - サーバ |
XAMPP 1.6
PHPの実行に必要なサーバー環境を一括インストールするパッケージ。無償で利用可能。
PHPエディタ
PHPの専用エディタ。無償で利用可能。
| Hello Ext! |
"Hello Ext!"というダイアログを表示するプログラムを作成する。
プロジェクトフォルダの作成
Aptanaもしくは手作業でプロジェクトフォルダを作成し、Ext JSの以下のフォルダとファイルをコピー。
| フォルダ・ファイル | 説明 |
| adapterフォルダ | 外部フレームワークとのアダプタ。 スタンドアロン時はext-base.jsがあればOK。 |
| resourcesフォルダ | CSSやイメージなどのリソース。 CSSはresource/css/ext-all.cssがあればOK。 イメージはimages/defaultがあればOK。 容量を減らしたい時は個別にCSSファイルと画像ファイルを指定。 |
| ext-all.js | Extのソースが全てアーカイブされたJSファイル。 |
ソースコードの記述
以下のHTMLとJavaScriptを記述。文字コードはUTF-8で保存する。
Aptanaでは「ウィンドウ→設定」で設定ダイアログを開き、ツリー「一般→ワークスペース」を選択し、
テキスト･ファイル・エンコードにその他の「UTF-8」を指定。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HelloExt</title>
<!--ライブラリ-->
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<!--プログラム-->
<script type="text/javascript" src="HelloExt.js"></script>
</head>
<body>
"Hello Ext!"というダイアログの表示。
</body>
</html>
|
//処理の開始
Ext.onReady(function() {
Ext.MessageBox.alert('','Hello Ext!');
});
|
| Elementの取得 |
Elementを取得するプログラムを作成する。
Elementの取得
Elementを取得するには、通常は次のように記述する。
var myDiv=document.getElementById('myDiv');
|
さらにはブラウザ依存も考慮に入れる必要がある。
ExtでElementを取得するには、次のように記述する。
var myDiv=Ext.get('myDiv');
|
さらには、Element.get()メソッドは内部キャッシュを持っており、一度取得したElementは高速に取得可能。
IDではなくタグ種別でElementを取得したい時はExt.select()メソッドを使う。
ソースコードの記述
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ElementEx</title>
<!--ライブラリ-->
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<!--プログラム-->
<script type="text/javascript" src="ElementEx.js"></script>
</head>
<body>
<div id="divText">テストメッセージです。</div>
<input type="button" id="btnShowDialog" value="ダイアログの表示" />
</body>
</html>
|
//処理の開始
Ext.onReady(function() {
//テキストのハイライト
var divText=Ext.get('divText');
divText.highlight();
//ボタンの生成ト
var btnShowDialog=Ext.get('btnShowDialog');
btnShowDialog.on('click',function(){
Ext.MessageBox.alert('','ボタンを押した。');
});
});
|
| Ajaxの利用 |
Ajaxにより非同期通信を行うプログラムを作成する。
ソースコード
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AjaxEx</title>
<!--ライブラリ-->
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<!--プログラム-->
<script type="text/javascript" src="AjaxEx.js"></script>
</head>
<body>
<input type="button" id="btnAsync" value="非同期通信" />
<div id="divText" style="visibility: hidden"></div>
</body>
</html>
|
//処理の開始
Ext.onReady(function(){
//非同期ボタンクリック時のイベント処理
Ext.get('btnAsync').on('click',function(){
var divText=Ext.get('divText');
divText.load('test.html',
{},
function(element,success) {
if (success) {
Ext.MessageBox.alert('',element.dom.innerHTML);
} else {
Ext.MessageBox.alert('','通信失敗');
}
});
});
});
|
?これは"test.html"です。 |
| Extクラス |
プロパティ
| プロパティ | 説明 |
| BLANK_IMAGE_URL : String | 1x1の透過GIFのURL |
| SSL_SECURE_URL : String | 空白のファイルのURL |
| isReady : Boolean | ドキュメントが読み込み完了しているかどうか。 |
| isSecure : Boolean | SSLを利用しているかどうか。 |
| isStrict : Boolean | ブラウザがstrictモードかどうか。 |
| useShims : Boolean Ext | Shimを利用するかどうか。 |
メソッド
| メソッド | 説明 |
| apply(Object obj, Object config, Object defaults) : Object | configのプロパティを全てコピー。 |
| applyIf(Object obj, Object config) : Object | まだ存在しない時、configのプロパティを全てコピー。 |
| decode() : void | Ext.util.JSON.decodeの省略記法。 |
| each(Array/NodeList/Mixed array, Function fn, Object scope) | イテレート。 |
| encode() : void | Ext.util.JSON.encodeの省略記法。 |
| escapeRe(String str) : String | 正規表現の判定の回避。 |
| extend(Object subclass, Object superclass, [Object overrides]) : void | 拡張。 |
| fly(String/HTMLElement el, [String named]) : Element | グローバルに共有されたElementの取得。 |
| get(String/HTMLElement/Element el) : Element | Elementの取得。 |
| getDom(String/HTMLElement/Element) el) : HTMLElement | DOMの取得。 |
| id([String/HTMLElement/Element el], [String prefix]) : void | ユニークIDの生成。 |
| namespace(String namespace1, String namespace2, String etc) : void | 名前空間の生成。 |
| onReady(Function fn, Object scope, boolean override) : void | ドキュメントが読み込み完了したら イメージ読み込み前に通知。 |
| query(String path, [Node root]) : Array | CSS/XPathセレクタによるDOMノードの選択。 |
| select(String/Array selector, [Boolean unique]) : CompositeElementLite/CompositeElement |
CSSセレクタによるElementの選択。 |
| urlDecode(String string, [Boolean overwrite]) : Object | URLのデコード。 |
| urlEncode(Object o) : String | URLエンコード。 |
| Functionクラス |
メソッド
| メソッド | 説明 |
| createCallback() : Function | コールバックの生成。 |
| createDelegate([Object obj], [Array args], [Boolean/Number appendArgs]) : Function | デリゲートの生成。 |
| createInterceptor(Function fcn, [Object scope]) : Function | インターセプターの生成。 |
| createSequence(Function fcn, [Object scope]) : Function | シーケンスの生成。 |
| defer(Number millis, [Object obj], [Array args], [Boolean/Number appendArgs]) : Number | 指定ミリ秒後に指定関数を呼ぶ。 |
| Dateクラス |
プロパティ
| プロパティ | 説明 |
| Date.DAY : String | 日。 |
| Date.HOUR | 時。 |
| Date.MILLI | ミリ秒。 |
| Date.MINUTE | 分。 |
| Date.MONTH | 月。 |
| Date.SECOND | 秒。 |
| Date.YEAR | 年。 |
| Date.dayNames | 日名。 |
| Date.monthNames | 月名。 |
メソッド
| メソッド | 説明 |
| Date.parseDate(String input, String format) : Date | 文字列のパース。 |
| add(String interval, Number value) : Date | 追加。 |
| clearTime(Boolean clone) : Date | 時間のクリア。 |
| clone() : Date | クローンの生成。 |
| format(String format) : String | 文字表記の取得。 |
| getDayOfYear() : Number | 年の何日目かを取得。 |
| getDaysInMonth() : Number | 月の何日目かを取得。 |
| getElapsed([Date date]) : Number | 日付間のミリ秒の取得。 |
| getFirstDateOfMonth() : Date | 月の最初の日の取得。 |
| getFirstDayOfMonth() : Number | 月の最初の日までの日数の取得。 |
| getGMTOffset() : String | 現在のグリニッジ標準時からのオフセットの取得。 |
| getLastDateOfMonth() : Date | 月の最終の日の取得。 |
| getLastDayOfMonth() : Number | 月の最終の日までの日数の取得。 |
| getSuffix() : String | 接尾語の取得。 |
| getTimezone() : String | タイムゾーンの取得。 |
| getWeekOfYear() : String | 週の取得。 |
| isLeapYear() : Boolean | うるう年があるかどうか。 |
| Extパッケージ |
Extパッケージ
| パッケージ | 説明 |
| Ext | 基本 |
| Ext.data | データ |
| Ext.dd | ドラッグ&ドロップ |
| Ext.form | フォーム |
| Ext.grid | グリッド |
| Ext.menu | メニュー |
| Ext.state | 状態 |
| Ext.tree | ツリー |
| Ext.util | ユーティリティ |
Extパッケージのクラス
| クラス | 説明 | 親クラス | 備考 |
| BasicDialog | 基礎ダイアログ | Observable | ダイアログ関連 |
| DialogManager | ダイアログ管理 | - | |
| MessageBox | メッセージボックス | - | |
| BasicLayoutRegion | 基礎レイアウト領域 | Observable | レイアウト関連 |
| LayoutRegion | レイアウト領域 | Observable-BasicLayoutRegion | |
| LayoutManager | レイアウトマネージャ | Observable | |
| BorderLayout | ボーダーレイアウト | Observable-LayoutManager | |
| ReaderLayout | リーダーレイアウト | Observable-LayoutManager-BorderLayout | |
| LayoutDialog | レイアウトダイアログ | Observable-BasicDialog | |
| Resizable | リサイズ可能 | Observable | |
| Button | ボタン | Observable | ボタン関連 |
| MenuButton | メニューボタン | Observable-Button | |
| Component | コンポーネント | Observable | コンポーネント関連 |
| ColorPalette | カラーパレット | Observable-Component | |
| DatePicker | 日付ピッカー | Observable-Component | |
| Editor | エディター | Observable-Component | |
| ComponentElement | コンポーネント要素 | - | |
| ComponentElementLite | コンポーネント要素ライト | ComponentElement | |
| ComponentMgr | コンポーネント管理 | - | |
| ContentPanel | コンテントパネル | Observable | コンテントパネル関連 |
| GridPanel | グリッドパネル | Observable-ContentPanel | |
| NestedLayoutPanel | ネストレイアウトパネル | Observable-ContentPanel | |
| DomHelper | Domヘルパー | - | Dom関連 |
| DomQuery | Domクエリー | - | |
| Element | 要素 | - | 要素関連 |
| Layer | レイヤー | Element | |
| Shadow | 影 | - | |
| EventManager | イベントマネージャ | - | イベント関連 |
| EventObject | イベントオブジェクト | - | |
| Fx | Fx | - | |
| View | ビュー | Observable | ビュー関連 |
| JsonView | Jsonビュービュー | Observable-View | |
| KeyMap | キーマップ | - | キー関連 |
| KeyNav | キーナビ | - | |
| LoadMask | ロードマスク | - | ロードマスク関連 |
| Template | テンプレート | - | テンプレート関連 |
| MasterTemplate | マスターテンプレート | Template | |
| QuickTips | クイックチップス | - | クイックチップス関連 |
| SplitBar | スプリットバー | Observable | スプリットバー関連 |
| SplitBar.BasicLayoutAdapter | スプリットバー-基礎レイアウトアダプタ | - | |
| SplitBar.AbsoluteLayoutAdapter | スプリットパー-独立レイアウトアダプタ | SplitBar.BasicLayoutAdapter | |
| TabPanel | タブパネル | Observable | タブ関連 |
| TabPanelItem | タブパネルアイテム | Observable | |
| Toolbar | ツールバー | - | ツールバー関連 |
| PagingToolbar | ページングツールバー | Toolbar | |
| Toolbar.Button | ツールバー-ボタン | Observable-Button | |
| Toolbar.MenuButton | ツールバー-メニューボタン | Observable-Button-MenuButton | |
| Toolbar.Item | ツールバー-アイテム | - | |
| Toolbar.Separator | ツールバー-セパレータ | Toolbar.Item | |
| Toolbar.Spacer | ツールバー-スペーサー | Toolbar.Item | |
| Toolbar.TextItem | ツールバー-テキストアイテム | Toolbar.Item | |
| UpdateManager | アップデートマネージャー | Observable | アップデートマネージャー関連 |
| UpdateManager.BasicRenderer | アップデートマネージャー-ベーシックレンダラー | - | |
| WindowManager | ウィンドウマネージャ | Ext.WindowGroup | ウィンドウマネージャー関連 |
Ext.dataパッケージのクラス
| クラス | 説明 | 親クラス | 備考 |
| ArrayReader | 配列リーダー | DataReader | リーダー関連 |
| JsonReader | Jsonリーダー | DataReader | |
| XmlReader | XMLリーダー | DataReader | |
| Connection | 接続 | - | 接続関連 |
| DataProxy | データプロクシ | - | プロクシ関連 |
| HttpProxy | HTTPプロクシ | - | |
| MemoryProxy | メモリープロクシ | - | |
| ScriptTagProxy | スクリプトタグプロクシ | - | |
| Node | ノード | Observable | ツリー関連 |
| SortType | ソート種別 | - | |
| Tree | ツリー | Observable | |
| Record | レコード | - | レコード関連 |
| SimpleStore | シンプルストア | Observable-Store | |
| Store | ストア | Observable |
Ext.ddパッケージのクラス
| クラス | 説明 | 親クラス | 備考 |
| DragDrop | ドラッグ&ドロップ | - | ドラッグ&ドロップ領域関連 |
| DD | ドラッグ&ドロップ | DragDrop | |
| DDProxy | ドラッグ&ドロッププロクシ | DragDrop-DD | |
| DragSource | ドラッグソース | DragDrop-DD-DDProxy | |
| DragZone | ドラッグゾーン | DragDrop-DD-DDProxy-DragSource | |
| DDTarget | ドラッグ&ドロップターゲット | DragDrop | |
| DropTarget | ドロップターゲット | DragDrop-DDTarget | |
| DropZone | ドロップゾーン | DragDrop-DDTarget-DropTarget | |
| DragDropMgr | ドラッグ&ドロップ管理 | - | 管理関連 |
| Registry | レジストリ | - | |
| ScrollManager | スクロールマネージャ | - | |
| StatusProxy | 状態プロクシ | - | 状態プロクシ関連 |
Ext.formパッケージのクラス
| クラス | 説明 | 親クラス | 備考 |
| BasicForm | 基礎フォーム | Observable | フォーム関連 |
| Form | フォーム | Observable-BasicForm | |
| Field | フィールド | Component | フィールド関連 |
| Checkbox | チェックボックス | Component-Field | |
| Radio | ラジオボタン | Component-Field-Checkbox | |
| TextField | テキストフィールド | Component-Field | |
| NumberField | 数値フィールド | Component-Field-TextField | |
| TextArea | テキストエリア | Component-Field-TextField | |
| TriggerField | トリガーフィールド | Component-Field-TextField | |
| DateField | 日付フィールド | Component-Field-TextField-TriggerField | |
| ComboBox | コンボボックス | Component-Field-TextField-TriggerField | |
| VTypes | 入力マスク | - | |
| Layout | レイアウト | Component | レイアウト関連 |
| Column | カラム | Component-Layout | |
| FieldSet | フィールドセット | Component-Layout |
Ext.gridパッケージのクラス
| クラス | 説明 | 親クラス | 備考 |
| Grid | グリッド | Observable | グリッド関連 |
| EditorGrid | 編集グリッド | Observable-Grid | |
| AbstractSelectionModel | 抽象選択モデル | Observable | 選択モデル関連 |
| CellSelectionModel | セル選択モデル | Observable-AbstractSelectionModel | |
| GridView | グリッドビュー | Observable-AbstractSelectionModel | |
| RowSelectionModel | ロー選択モデル | Observable-AbstractSelectionModel | |
| ColumnModel | カラムモデル | Observable | カラムモデル関連 |
Ext.menuパッケージのクラス
| クラス | 説明 | 親クラス | 備考 |
| Menu | メニュー | Observable | メニュー関連 |
| ColorMenu | カラーメニュー | Observable-Menu | |
| DateMenu | 日付メニュー | Observable-Menu | |
| MenuMgr | メニュー管理 | - | |
| BaseItem | ベースアイテム | Observable-Component | メニューアイテム関連 |
| Adapter | アダプター | Observable-Component-BaseItem | |
| ColorItem | カラーアイテム | Observable-Component-BaseItem-Adapter | |
| DateItem | 日付アイテム | Observable-Component-BaseItem-Adapter | |
| Item | アイテム | Observable-Component-BaseItem | |
| CheckItem | チェックアイテム | Observable-Component-BaseItem-Item | |
| Separator | セパレータ | Observable-Component-BaseItem | |
| TextItem | テキストアイテム | Observable-Component-BaseItem |
Ext.stateパッケージのクラス
| クラス | 説明 | 親クラス | 備考 |
| Manager | マネージャー | - | マネージャー関連 |
| Provider | プロバイダー | - | プロバイダー関連 |
| CookieProvider | クッキープロバイダー | Provider |
Ext.treeパッケージのクラス
| クラス | 説明 | 親クラス | 備考 |
| TreePanel | ツリーパネル | Observable-Tree | ツリー関連 |
| TreeLoader | ツリーローダー | - | |
| DefaultSelectionModel | デフォルト選択モデル | Observable | 選択モデル関連 |
| MultiSelectionModel | マルチ選択モデル | Observable | |
| TreeNode | ツリーノード | Observable-Node | ツリーノード関連 |
| AsyncTreeNode | 同期ツリーノード | Observable-Node-TreeNode | |
| TreeSorter | ソート | - | ソート関連 |
Ext.utilパッケージのクラス
| クラス | 説明 | 親クラス | 備考 |
| Observable | オブサーバー | - | オブサーバ関連 |
| ClickRepeater | クリックリピーター | Observable | |
| MixedCollection | ミックスコレクション | Observable | |
| CSS | CSS | - | ユーティリティ関連 |
| DelayedTask | ディレイタスク | - | |
| Format | フォーマット | - | |
| JSON | JSON | - | |
| TextMetrics | テキストメトリックス | - |
| ブラウザ依存情報 |
JSの文字列は「"」でなく「'」で指定
| サンプルコード | 説明 |
| var tree=new Tree.TreePanel("tree-div", { | IE7ではエラーとなる。 |
| var tree=new Tree.TreePanel('tree-div', { | IE7とFF2の両方で動く。 |
JSの属性指定の最後に「,」は残さない
| サンプルコード | 説明 |
| var tree=new Tree.TreePanel('tree-div', { animate :true l oader :new Tree.TreeLoader({dataUrl:'getnode.php'}), enableDD :true, containerScroll:true, }); |
IE7ではエラーとなる。 |
| var tree=new Tree.TreePanel('tree-div', { animate :true loader :new Tree.TreeLoader({dataUrl:'getnode.php'}), enableDD :true, containerScroll:true }); |
IE7とFF2の両方で動く。 |
| サンプル |
- ダイアログの表示
- レイアウトの利用
- ネストレイアウトの利用
- シンプルフォームの利用
- 複数列フォームの利用
- フィールドセットフォームの利用
- メニューの利用
- シンプルタブの利用
- カスタムタブの利用
- ドラッグ&ドロップ
- ドロップゾーンの利用
- ツリーの表示
- イメージ一覧の表示
- アコーディオンの利用
- グリッドの利用
- 補間アニメーションの利用
−戻る−