Ext JS入門 リッチUIなWebサイトをつくる Ajaxフレームワーク
美しいデザインの高機能ユーザーインターフェースの制作を容易にするExt JSフレームワークの解説書です。Ext JSの組み込み、PrototypeやjQueryなどのAjaxライブラリと併用する方法、画像ビューワーの作り方、XMLデータの表示やソート処理、サーバ側データベースとの連携処理の方法を解説。さらに、やりたい事から構文やサンプルを調べることができる充実の逆引きクイックリファレンスを掲載しています。配列の操作、ダイヤログの表示、DOMエレメントの書き方、ID名の生成、グラフィカルなメニューの作り方、ツールバーに階層化メニューを表示する方法など実践的なサンプルを用意しています。今注目のAjax/RIAフレームワークでリッチウェブサイトを作りましょう！
【サポートはこちら】→https://www.shuwasystem.co.jp/support/7980html/2323.html
【サポートはこちら】→https://www.shuwasystem.co.jp/support/7980html/2323.html
1章 Ext JSとは？
1-1 Ext JSとは何か？
1-2 Ext JSで何ができるのか
1-3 Ext JSのダウンロード
1-4 Ext JSの組み込み
1-5 他のAjaxライブラリと組み合わせる
Prototype.jsライブラリ
jQueryライブラリ
Yahoo UIライブラリ
2章 Ext JSを使う
2-1 Ext JSの使用準備
2-2 ダイアログを表示する
アラートダイアログを表示する
確認ダイアログを表示する
入力ダイアログを表示する
メッセージダイアログを表示
2-3 ページ上のエレメントの内容を書き換える
3章 シンプルな画像ビューアを作成する
3-1 シンプルな画像ビューアー
3-2 ツールバーを表示する
3-3 メニューを表示する
3-4 画像を表示するパネルを用意する
3-5 ツールバーのボタンがクリックされた時の処理を行う
3-6 メニューが選択された場合の処理
3-7 ウィンドウを生成する
3-8 ツールバーをウィンドウ内に表示する
4章 Ext JSで簡単な社内システムを作成する
4-1 作成するアプリケーションの概要
4-2 XMLデータとグリッド表示
4-3 XMLデータで子ノードが複数ある場合の処理
4-4 表示する項目を加工
4-5 グリッドの表示オプション
4-6 XMLデータをソートして表示
4-7 ページ全体のレイアウト設計
4-8 グリッドとHTMLデータの表示
4-9 ウィジェットの表示
4-10 ウィンドウの表示
4-11 JSONデータの使用
XMLデータの場合
JSONデータの場合
5章 既存のページでグリッドを使う
5-1 作成する内容
5-2 XMLデータとグリッド表示
5-3 商品画像の表示と説明文の折り返し
5-4 金額を3桁ごとに区切って表示
5-5 日付をフォーマットして表示
5-6 選択された項目に対して処理を行う
5-7 項目が選択されたらインラインフレームに説明ページを表示
6章 グーグルマップと組み合わせる
6-1 作成する内容
XMLデータの読み込みとレイアウト
グーグルマップの表示
ストリートビューの表示
レイアウトを入れ子にする
7章 PC管理システムを作成する（サーバ連携編）
7-1 作成するアプリケーションの概要
7-2 データベース環境の準備（サーバ側）
サンプル1
サンプル2
7-3 データ取得APIの作成（サーバ側）
サンプル3
グリッドとウィンドウによるデータ表示（クライアント側）
サンプル4
登録フォームの作成（クライアント側）
サンプル5
データ更新APIの作成（サーバ側）
サンプル6
各種追加機能の実装（クライアント側・サーバ側）
逆引きクイックリファレンス
Ajax/非同期通信
非同期通信を行う
通信イベントを設定する
配列
要素を検索する
要素を削除する
各要素に対して処理を行う（イテレータ）
日付
日付の表示形式を指定する
n日後を求める
月の最終日を求める
曜日の文字を設定する
日付が一定範囲内かどうか調べる
ダイアログ
アラートダイアログを表示する
確認ダイアログを表示する
入力ダイアログを表示する
メッセージダイアログを表示する
メッセージダイアログにアイコンを表示する
メッセージダイアログのメッセージを更新する
プログレスバーを表示する
DOM(ドキュメ ントオブジェクト)
エレメントを取得する
エレメントをセンタリングする
エレメントのサイズを変更する
エレメントの位置を変更する
エレメントのサイズを取得する
エレメントの位置を取得する
エレメントの表示／非表示を制御する
エレメントの表示／非表示を交互に切り替える
エレメントのCSSクラスを追加／削除する
スタイルセレクタを使ってエレメントを選択する
ドラッグ/ドロップ
エレメントをドラッグできるようにする
エレメントのドラッグ可能範囲と量を指定する
エレメントをリサイズできるようにする
エレメントをドロップできるようにする
エフェクト
ハイライトエフェクト
拡大しながら消えるエフェクト
フェードイン
フェードアウト
フレームエフェクト
ゴーストエフェクト
スケールエフェクト
スライドインエフェクト
スライドアウトエフェクト
スイッチオフエフェクト
その他
名前空間を設定する
ID名を生成する
OSやブラウザなどの環境をチェックする
イベント
ページが読み込まれたら処理を行う
イベントを設定する
イベントを解除する
マウスオーバー時にスタイルシートを追加する
クリック時にスタイルシートを追加する
マウスオーバー／アウトで処理を行う
フォーム
テキストフィールドを表示する
テキストエリアを表示する
数値入力フィールドを表示する
日付選択フィールドを表示する
時間選択フィールドを表示する
ラジオボタンを表示する
チェックボックスを表示する
ボタンを表示する
コンボボックス（セレクトメニュー）を表示する
HTMLエディタを表示する
グリッド
グリッドを表示する
XMLデータを読み込む
JSONデータを読み込む
ページ単位でグリッドを表示する
ページングツールバーにメッセージを表示する
ページングツールバーのページ番号部分の文字を変更する
プロパティグリッドを表示する
チェックボックス付きのグリッドを表示する
編集機能付きグリッドを表示する
グループ化して表示する
グループ化された部分の横に文字を表示する
選択した行のデータを取得する
選択したセルのデータを取得する
行を選択できないようにする
グリッド上にマウスが乗ってもハイライトしないようにする
グリッド内のデータをソートして表示する
列を非表示にする
列幅を自動調整する
列をドラッグして入れ替えできないようにする
数値
数値を一定の範囲内に収める
パネル
シンプルなパネルを表示する
分割パネルを表示する
カード型パネルを表示する
アコーディオン型パネルを表示する
スライダー
スライダーを表示する
スライダー値を設定する
ステータスバーを表示する
ステータスバーの内容を書き換える
文字列
文字列の前後の空白を削除する
文字列/テキスト
文字の前に指定文字を入れる
文字列を交互に入れ替える
文字列フォーマット（テンプレート）を指定する
タブ
タブを表示する
HTMLタグの内容をタブの内容として表示する
非同期通信でタブの内容を読み込む
タイマー
一定時間ごと処理を行う
タスクを停止する
ツールバー
ツールバーにボタンを表示する
ツールバーにメニューを表示する
ツールバーに階層化メニューを表示する
ツールバーにテキストフィールドを表示する
ボタンやメニューの横にカスタムアイコンを表示する
ツールチップ
ツールチップを表示する
ツールチップのデフォルト設定を行う
ビューポート/レイアウト
ビューポートを設定する
領域の幅を設定する
領域の枠をドラッグして領域のサイズを変更できるようにする
領域間の枠を消す
領域を折りたためるようにする
領域に特定のウィジェットやコンポーネントを表示する
ウィジェット
カレンダーを表示する
カラーピッカーを表示する
カラーピッカーでカラーが選択された時に処理を行う
ウィンドウ
ウィンドウを表示する
ツールバーを表示する
ウィンドウを最大化／最小化する
ウィンドウを閉じる
ウィンドウにボタンを追加する
ウィンドウの表示位置を指定する
ウィンドウの横幅／縦幅を指定する
ウィンドウの前後関係を指定する
テンプレート
テンプレートを表示する
データ内容を繰り返して表示する
条件に一致したデータのみ表示する
番号を表示する
1-1 Ext JSとは何か？
1-2 Ext JSで何ができるのか
1-3 Ext JSのダウンロード
1-4 Ext JSの組み込み
1-5 他のAjaxライブラリと組み合わせる
Prototype.jsライブラリ
jQueryライブラリ
Yahoo UIライブラリ
2章 Ext JSを使う
2-1 Ext JSの使用準備
2-2 ダイアログを表示する
アラートダイアログを表示する
確認ダイアログを表示する
入力ダイアログを表示する
メッセージダイアログを表示
2-3 ページ上のエレメントの内容を書き換える
3章 シンプルな画像ビューアを作成する
3-1 シンプルな画像ビューアー
3-2 ツールバーを表示する
3-3 メニューを表示する
3-4 画像を表示するパネルを用意する
3-5 ツールバーのボタンがクリックされた時の処理を行う
3-6 メニューが選択された場合の処理
3-7 ウィンドウを生成する
3-8 ツールバーをウィンドウ内に表示する
4章 Ext JSで簡単な社内システムを作成する
4-1 作成するアプリケーションの概要
4-2 XMLデータとグリッド表示
4-3 XMLデータで子ノードが複数ある場合の処理
4-4 表示する項目を加工
4-5 グリッドの表示オプション
4-6 XMLデータをソートして表示
4-7 ページ全体のレイアウト設計
4-8 グリッドとHTMLデータの表示
4-9 ウィジェットの表示
4-10 ウィンドウの表示
4-11 JSONデータの使用
XMLデータの場合
JSONデータの場合
5章 既存のページでグリッドを使う
5-1 作成する内容
5-2 XMLデータとグリッド表示
5-3 商品画像の表示と説明文の折り返し
5-4 金額を3桁ごとに区切って表示
5-5 日付をフォーマットして表示
5-6 選択された項目に対して処理を行う
5-7 項目が選択されたらインラインフレームに説明ページを表示
6章 グーグルマップと組み合わせる
6-1 作成する内容
XMLデータの読み込みとレイアウト
グーグルマップの表示
ストリートビューの表示
レイアウトを入れ子にする
7章 PC管理システムを作成する（サーバ連携編）
7-1 作成するアプリケーションの概要
7-2 データベース環境の準備（サーバ側）
サンプル1
サンプル2
7-3 データ取得APIの作成（サーバ側）
サンプル3
グリッドとウィンドウによるデータ表示（クライアント側）
サンプル4
登録フォームの作成（クライアント側）
サンプル5
データ更新APIの作成（サーバ側）
サンプル6
各種追加機能の実装（クライアント側・サーバ側）
逆引きクイックリファレンス
Ajax/非同期通信
非同期通信を行う
通信イベントを設定する
配列
要素を検索する
要素を削除する
各要素に対して処理を行う（イテレータ）
日付
日付の表示形式を指定する
n日後を求める
月の最終日を求める
曜日の文字を設定する
日付が一定範囲内かどうか調べる
ダイアログ
アラートダイアログを表示する
確認ダイアログを表示する
入力ダイアログを表示する
メッセージダイアログを表示する
メッセージダイアログにアイコンを表示する
メッセージダイアログのメッセージを更新する
プログレスバーを表示する
DOM(ドキュメ ントオブジェクト)
エレメントを取得する
エレメントをセンタリングする
エレメントのサイズを変更する
エレメントの位置を変更する
エレメントのサイズを取得する
エレメントの位置を取得する
エレメントの表示／非表示を制御する
エレメントの表示／非表示を交互に切り替える
エレメントのCSSクラスを追加／削除する
スタイルセレクタを使ってエレメントを選択する
ドラッグ/ドロップ
エレメントをドラッグできるようにする
エレメントのドラッグ可能範囲と量を指定する
エレメントをリサイズできるようにする
エレメントをドロップできるようにする
エフェクト
ハイライトエフェクト
拡大しながら消えるエフェクト
フェードイン
フェードアウト
フレームエフェクト
ゴーストエフェクト
スケールエフェクト
スライドインエフェクト
スライドアウトエフェクト
スイッチオフエフェクト
その他
名前空間を設定する
ID名を生成する
OSやブラウザなどの環境をチェックする
イベント
ページが読み込まれたら処理を行う
イベントを設定する
イベントを解除する
マウスオーバー時にスタイルシートを追加する
クリック時にスタイルシートを追加する
マウスオーバー／アウトで処理を行う
フォーム
テキストフィールドを表示する
テキストエリアを表示する
数値入力フィールドを表示する
日付選択フィールドを表示する
時間選択フィールドを表示する
ラジオボタンを表示する
チェックボックスを表示する
ボタンを表示する
コンボボックス（セレクトメニュー）を表示する
HTMLエディタを表示する
グリッド
グリッドを表示する
XMLデータを読み込む
JSONデータを読み込む
ページ単位でグリッドを表示する
ページングツールバーにメッセージを表示する
ページングツールバーのページ番号部分の文字を変更する
プロパティグリッドを表示する
チェックボックス付きのグリッドを表示する
編集機能付きグリッドを表示する
グループ化して表示する
グループ化された部分の横に文字を表示する
選択した行のデータを取得する
選択したセルのデータを取得する
行を選択できないようにする
グリッド上にマウスが乗ってもハイライトしないようにする
グリッド内のデータをソートして表示する
列を非表示にする
列幅を自動調整する
列をドラッグして入れ替えできないようにする
数値
数値を一定の範囲内に収める
パネル
シンプルなパネルを表示する
分割パネルを表示する
カード型パネルを表示する
アコーディオン型パネルを表示する
スライダー
スライダーを表示する
スライダー値を設定する
ステータスバーを表示する
ステータスバーの内容を書き換える
文字列
文字列の前後の空白を削除する
文字列/テキスト
文字の前に指定文字を入れる
文字列を交互に入れ替える
文字列フォーマット（テンプレート）を指定する
タブ
タブを表示する
HTMLタグの内容をタブの内容として表示する
非同期通信でタブの内容を読み込む
タイマー
一定時間ごと処理を行う
タスクを停止する
ツールバー
ツールバーにボタンを表示する
ツールバーにメニューを表示する
ツールバーに階層化メニューを表示する
ツールバーにテキストフィールドを表示する
ボタンやメニューの横にカスタムアイコンを表示する
ツールチップ
ツールチップを表示する
ツールチップのデフォルト設定を行う
ビューポート/レイアウト
ビューポートを設定する
領域の幅を設定する
領域の枠をドラッグして領域のサイズを変更できるようにする
領域間の枠を消す
領域を折りたためるようにする
領域に特定のウィジェットやコンポーネントを表示する
ウィジェット
カレンダーを表示する
カラーピッカーを表示する
カラーピッカーでカラーが選択された時に処理を行う
ウィンドウ
ウィンドウを表示する
ツールバーを表示する
ウィンドウを最大化／最小化する
ウィンドウを閉じる
ウィンドウにボタンを追加する
ウィンドウの表示位置を指定する
ウィンドウの横幅／縦幅を指定する
ウィンドウの前後関係を指定する
テンプレート
テンプレートを表示する
データ内容を繰り返して表示する
条件に一致したデータのみ表示する
番号を表示する
