タグ ‘チュートリアル’ 一覧
Ext JS/Sencha Touch入門40 Ajaxリクエスト処理
今回はExt JS,Sencha Touchのどちらでも非常によく使うAjaxの処理を紹介します。
サンプルコードはSencha Touchですが、Ajaxリクエストの処理はExt JSでもほぼ同じです。
Ajax サンプル
まずAjaxでリクエストする先を用意する必要があります。
今回はPHPで作成しました。
・PHP
<?php
//サンプル
//3秒待つ
sleep(3);
//POST値の処理
$param = $_POST['id'];
$res['id'] = $param;
if ($param) {
$res['success'] = true;
}else {
$res['success'] = false;
}
//JSONで返す
header('Content-Type: application/json');
echo json_encode($res);
die();
?>
3秒処理を遅らせています。
レスポンスにはJSON形式でPOSTされた情報とサーバーサイドでの処理が正しく終わったらsuccessにtrueを返すようにしています。
HTMLファイルはSencha Touchの基本形のものでよいです。
・HTML
<!DOCTYPE html>
<html manifest="index.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax Sample</title>
<link rel="stylesheet" href="../../st/resources/css/ext-touch.css" type="text/css">
<script type="text/javascript" src="../../st/ext-touch-debug.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body></body>
</html>
今回のサンプルではパネルをひとつ作ってツールバー上に、Ajaxリクエストをキックするボタンを配置します。このボタンをタップするとAjax リクエストが実行されるようにします。
・Javascript
Ext.setup({
onReady: function() {
//リクエスト処理
var ajax = function(callback) {
//ローディングマスク
panel.el.mask(
false,
' <div style="margin:50% auto; text-align:center;color:#EEE;"><img src="loader.gif"/> <br />お待ちください...</div>');
//Ajax リクエスト
Ext.Ajax.request({
url:'post.php',
params:{
id:'test'
},
success:function(result,opt){
//マスクを外す
panel.el.unmask();
var res = Ext.decode(result.responseText);
if (res.success) {
window.alert('Success');
if (Ext.isFunction(callback)) {callback()};
}
},
failure:function(result,opt){
window.alert('リクエスト失敗。ネットワーク接続を確認してください。');
}
});
};
//パネルの生成
var panel = new Ext.Panel({
fullscreen: true,
styleHtmlContent:true,
dockedItems:[
{
xtype:'toolbar',
dock:'top',
items:[
{
ui:'mask',
iconCls:'action',
handler:function(){
//コールバック関数
var callback = function(){
panel.update('Success!');
};
//Ajax処理実行
ajax(callback);
}
}
]
}
],
html:'Ajax Request Sample'
});
}
});
前回のHello, World + Tbarのサンプルによく似ていますが、今回はxtypeでツールバーを作成しています。
xtypeについてはコチラ
ボタンのコンフィグオプションで
ui:’mask’,
iconCls:’action’
が設定されています。iconClsではボタンに配置する画像をCSSで設定できますが、今回はSencha Touchに予め用意されているactionクラスをそのまま使います。
Sencha Touchのパッケージ内のexamplesのiconsサンプルをみるとどんなアイコンがあるのかが分かります。
Ajax リクエスト処理
Ext JSおよびSencha TouchではExt.Ajaxクラスを使用してAjax処理を行ないます。このクラスはシングルトンですので、Ajax処理を呼びたい箇所でExt.Ajaxのrequestメソッドを呼び出します。パラメーターはURLなので設定はオブジェクトで渡します。
・Ext.Ajax.request
Ext.Ajax.requestの引数に渡しているもの
- url:(String)リクエスト先のURL
- params:(Object) パラメータ
- success:(Function) Ajaxリクエスト成功時のコールバック関数
- failure:(Function) Ajaxリクエスト失敗時のコールバック関数
最も単純なAjaxリクエストへ渡す設定は上の4つのものになります。
paramsに設定されているパラメータをurlの先にPOSTして,正しいレスポンスが返ってきたときにsuccessに設定されているコールバック関数が実行されます。リクエスト自体が失敗した場合(404などが返ってきた場合。)にfailureに設定されているコールバックが実行されます。
サンプルではajaxという関数にAjaxの処理をまとめています。
Ext.Ajax.request()の部分で実際にAjaxを実行します。
ajax関数の中では、リクエスト中に画面全体にマスクを掛ける処理を、行っています。
・ローディングマスク
ローディングマスクを表示
panel.el.mask(
false,
' <div style="margin:50% auto; text-align:center;color:#EEE;"><img src="loader.gif"/> <br />お待ちください...</div>');
Ext.Elementのmaskメソッドでそのエレメントにマスクをかける処理を実行します。Ext JSとSencha Touchでは引数が違うので注意が必要です。
Sencha Touchのマスク処理はスタイルがあんまり良くないので、独自で設定する必要があります。ローディング用の画像もないので適当なものを用意する必要があります。今回はこんなのGifアニメを作って設定しています。
ローディング用Gifアニメ
マスクを外すときは同様にExt.Elementのunmaskメソッドで行ないます。サンプルでは
successのコールバックの中でpanel.elをunmaskを実行しています。
success:function(result,opt){
//マスクを外す
panel.el.unmask();
・
・
・
}
・コールバック処理
success:function(result,opt){
//マスクを外す
panel.el.unmask();
var res = Ext.decode(result.responseText);
if (res.success) {
window.alert('Success');
if (Ext.isFunction(callback)) {callback()};
}
},
failure:function(result,opt){
window.alert('リクエスト失敗。ネットワーク接続を確認してください。');
}
リクエスト成功/失敗時はwindow.alertを使って結果を表示してます。
また今回のサンプルではsuccess時にさらに呼び出し元でコールバックを設定して、パネル内の要素を”Success”に書き換えています。
・レスポンスボディーの取り出し
successのコールバックの第一引数にレスポンスがオブジェクトとして渡されます。
サンプルではresultという名前に設定しています。resultの中のresponseTextにレスポンスのボディーが格納されています。
サンプルのPHPの場合ではJSONの文字列を返しています。レスポンスボディーはそのままではただのテキストです、そのため文字列からJSONに変換する必要があります。
Sencha TouchでもExt JSと同じようにExt.util.JSONクラスを使ってJSONの変換を行います。
今回は文字列からオブジェクトへの変換(JSON.decode)処理を使います。
success:function(result,opt){
//文字列からオブジェクトに変換する
var res = Ext.decode(result.responseText);
//resはオブジェクトとして扱えるようになる。
if (res.success) {
window.alert('Success');
・
・
・
}
}
Ext.decodeはExt.util.JSON.decodeへのエイリアスです。Ext.decodeで呼び出した方が簡素なのでこちらを使っています。
このExt.decodeを使ってレスポンスボディの文字列をJavascriptのオブジェクトとして扱えるように変換します。
変換されたレスポンスボディはオブジェクトとして扱えるので、res.successのようにドットシンタックスで任意のプロパティ値を取得できるようになります。
以上、Ext.Ajax.requestの簡単な使い方です。詳しくはAPIリファレンスをご覧ください。
Sencha Touch API Documentation
http://www.sencha.com/deploy/touch/docs/?class=Ext.Ajax
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
Sencha Touch 入門: Ext JS & Sencha Touch勉強会7月＠東京(2010/7/25 )のアジェンダ
2010/7/25のExt JS & Sencha Touch勉強会7月＠東京でのsus4 佐竹の担当箇所のSencha Touch入門篇アジェンダです。
時間と場所は下記の通りです。残念ながら既に定員に達しているようです。
当日はUstreamでも配信も予定されているようですので、こちらでご覧ください。
http://www.ustream.tv/channel/extjapan
以下 Ext Japanブログより転載
日時：2010年7月28日（水）19:00～21:00（18:45開場）
募集人数：45名
場所：東京都港区東新橋1-9-1 東京汐留ビルディング9Fソフトバンク株式会社内（今回はいつもと会場が違いますので、ご注意ください。）
参加費：無料
アジェンダ：
Senchaへのブランド変更について（直鳥）
Sencha Touch入門（株式会社sus4 佐竹様）
Sencha TouchとYubizoで作るネイティブアプリ（株式会社アイキューブドシステムズ 佐々木様）
SpreadOfficeとSencha Touch（小堤）
ホワイトクラウド シェアードHaaSのご紹介（ソフトバンクテレコム株式会社 加藤様）
—–
Sencha Touch入門：Sencha Touchのはじめかた 佐竹裕行 – 株式会社sus4
・Sencha TouchでつくるiPhone/iPadアプリ
・Sencha Touchの環境
エディタ等
デバッグコンソール
・Hello, World!
Sencha Touchのアプリを作る。
HTML + JS合わせても30行くらいで
APIリファレンス、デバッグ環境など
・付属サンプルCarouselの解説
以前書いたブログの記事ベースにもう少し詳しく、Sencha Touchアプリの作り方を紹介します。
http://extjs.blog.sus4.co.jp/2010/06/28/sencha-ex-carousel/
—–
時間的にSencha Touchのさわり位しかできないと思いますが、
実際に手を動かしてSencha Touchを作ることと、その際のTipsが紹介できれば良いかなと思います。
APIリファレンスの読み方、フォーラム利用等。
内容はできるだけ簡単にして、ExtJSを知らなくても分かる内容です。
まさに入門という内容で、サンプルもできる限り簡単なものにしました。
Hello,World!に至ってはHTML + JS合わせても30行程度コードを書くだけです。
Sencha Touchの開発の雰囲気がつかめれば良いかなと思っています。
またSencha Touchのパッケージに含まれるexamplesを自力で読めるようになるのが目標です。
事前の準備しておくと良いもの：
・Sencha Touch ライブラリのダウンロード
http://extjs.co.jp/products/touch/
・iPhone、iPad、Androidでバイスの実機 もしくは XCode付属iPhoneシュミレーター
Android,iPhone 3G以下はあまりおすすめできません。
XCodeはダウンロードに数GBかかるので事前にインストールしておくいていただくとスムーズです。
・ExtJS自体を知らない方はこのブログのチュートリアルの以前の記事を読んでおいていただけると良いかと思います。
勉強会ext-onreadyからはじめるextjsのまとめ
sus4 Ext JSブログ内Sencha Touchの記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
Sencha Touch入門:Sencha Touch の付属サンプルCarouselを使ってSencha Touchのコツをつかむ
Sencha Touch入門
Sencha Touch に付属するでもCarouselを見ながら、基本的なSencha Touchの使い方を紹介します。
コードは配布されているSencha Touchパッケージの/examples/carousel にあります。
ここではindex.htmlについては,前回の記事をごらんください。
index.jsをお好きなエディタで開きながらご覧下さい。
iPad or iPhoneがあるとなおよいと思います。
Ext JSの基本についてはこちらをご覧下さい：
Ext.onReadyからはじめるExtJSのまとめ
Sencha Touch Examples
Sencha TouchはこれまでのExt JSのコードと違う個所がいくつかあります。
今回はその中でも基本となる、3点を紹介します。
1.Ext.setup()
2.onReadyコンフィグ
3.panelのfullscreenコンフィグ
1.Ext.setup();
これまでのExt JSのアプリではExt.onReady()をアプリの起動ポイントとして使っていることがほとんどでした。
Sencha Touch付属のサンプルではExt.setup()を使って、様々な初期設定を行っています。onReady()もこの
Ext.setup()のなかで設定されています。
APIをみるとsetupで設定できる項目一覧が乗っているので簡単に訳しておきます。
- fullscreen – Boolean - フルスクリーン設定
- tabletStartupScreen – String – iPad用の起動時画像へのパス サイズは768×1004 縦長でないといけない
- phoneStartupScreen – String – iPhoneと iPod touch用起動時画像へのパス 320×460 で縦長でないといけない
- icon -タブレットとスマートフォン両方に使われるアイコン画像へのパス 72×72がよい
- tabletIcon – String – タブレット用アイコン画像へのパス こちらがiconで設定される画像より優先される 72×72がよい.
- phoneIcon – String – スマートフォン用アイコン画像へのパス こちらがiconで設定される画像より優先される 57×57がよい.
- glossOnIcon – Boolean – iPhone, iPad and iPod Touchのアイコンにグロスのエフェクトをつけるかどうか
- statusBarStyle – String – iOS web アプリのステータスバーのスタイルの設定. default, black,black-translucentのどれかを選択。
- preloadImages – Array – プリロードする画像へのパスの配列（詳細は後日調査）
- onReady – Function – DOM構築後に実行される関数。アプリの起動ポイントになることが多い。
- scope – Scope – スコープの設定
画像系の設定が多いですね。
CarouselサンプルのExt.setup()で設定される、他の項目をみるといくつか画像が設定されています。
Sencha TouchのWebアプリをホーム画面に追加してから起動すると,iPadはtabletStartupScreen,
iPhoneはphoneStartUpScreenが起動時の画面として登録されます。
Safariのツールバーで[+]をタップすると以下のようなメニューがでるので、ホームに追加します。
Sencha Touch アプリをホーム画面に追加
iconはホーム画面に設定される際のアイコンになる画像です。（ただし現状ではiPadでは正しく設定されましたが、iPhone4では上手くいきませんでした。もう少し詳しく調べてみます。）
iPhone4だとこうなりました。
ホーム画面に追加されたSencha Touch アプリ
- tabletStartupScreen : タブレット用（iPad）
- phoneStartupScreen : スマートフォン用（iPhone,iPod Touch）
- icon :アイコンとなる画像（iPadでしか正しく設定されない？）
まだAndroidの文字がありませんが、これから対応されていくと思います。
iPhoneでの起動時の画像
またホーム画面から起動すると自動的にURLバーとSafariのツールバーが非表示になります。これだけでぐっとネイティブアプリのような見た目になります。
2.onReadyコンフィグ
次にonReadyで実行される処理を見ていきます。
Carouselサンプルでは上下2つの領域に2つのカルーセルのコンテナが配置されています(carousel1,2)。それぞれのコンテナにはさらに子となる要素を設定して、その要素をスライドさせることができます。
carousel1も2もほぼ同じ内容ですので1のほうだけを紹介します。
// Create a Carousel of Items
var carousel1 = new Ext.Carousel({
defaults: { cls: 'card' },
items: [
{
html: '<h1>Carousel</h1><p>Navigate the two carousels on this page by swiping left/right or clickin g on one side of the circle indicators below.</p>'
}, {
title: 'Tab 2',
html: '2'
}, {
title: 'Tab 3',
html: '3'
}]
});
基本的にはExt JSでpanel等の配下にさらに子となるパネルを入れる作業とおなじです。
TabPanelやCardレイアウトのパネルで設定したように,itemsの中にパネルを設定しています。ここでは単純にHTMLで内容を記述した3枚のパネルを使っています。defaultsでそれぞれのパネルのCSSクラスにcardというセレクタを追加してます。
3.fullscreen設定
このサンプルはほんとに簡単で上で作ったカルーセルコンテナをパネルに配置しているだけです。
ただしこのカルーセルの親となるパネルのコンフィグでfullscreen設定をtrueにする必要があります。
この設定で、Ext JSのViewportのように画面全体にパネルを広げます。
ここではlayoutでvboxを設定しています。これはExt JSのレイアウトと同じですね。
この部分だけをみるとExt JSのコードとほとんど区別が付きません。
これまで培ったExt JSのノウハウをそのままSencha Touchで作るタッチスクリーンのアプリに活かせるのよく分かります。
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel1, carousel2]
});
またデバッグの方法を考える必要があります。モバイルSafariではデバッグメニューを表示できますが不十分です。
FirefoxでSencha Touchアプリを見るとレイアウトがかなり崩れています。
よい方法を見つけられた方は是非教えてください。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
Sencha Touch をはじめよう 1 (Getting Started with Sencha Touch の邦訳 その１)
Sencha Touch をダウンロードするとGetting Started width Sencha Touchというオライリーの本のタイトルっぽいチュートリアルが付属しています。
当然英語なので勝手に翻訳してみます。
英語としては簡単な文章になっているので、原文でも読みやすいとおもいます。
Ext JSの知識がある人にとっては、内容があまりありません。ExtJSの知識無しでいきなりSencha Touchはじめる人のためのチュートリアルといった感じです。
Sencha Touch をはじめよう (Getting Started with Sencha Touch の邦訳)
これはSencha Touchのはじめ型を解説した文書です。
Sencha Touchを使ってタッチスクリーンを持つデバイスに特化したWebアプリを作る際の基本的なステップを紹介しています。この解説では、今回のSencha Touchのリリースに含まれるサンプルアプリGeoTweetsの詳細な製作ステップも紹介しています。
この解説はSencha Touchを使ってすばやく、タッチスクリーンに対応したデバイス向けのWebアプリを作りたい全てのWebデベロッパーに向けて書かれています。
以下の準備を先に済ませている前提で話を進めます
Sencha Touchのライブラリをダウンロード。
開発用のサーバーの準備
HTML + CSS + JSを使用したWebアプリの開発の知識がある。
それでははじめましょう。
この解説では以下のセクションがあります。
- Sencha Touch の紹介 ：Introduction to Sencha Touch
- Sencha Touch の使い方（基本編）：Using Sencha Touch: Main Steps
- Sencha Toutchの使い方（応用編：GeoTweetsの解説）：Using Sencha Touch: Detailed Steps for Creating the GeoTweets Application
- まとめ：Summary and Further Reading
※訳注：今回の翻訳はSencha Touchの使い方（基本編）までです。
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJS入門39 ファイルをアップロードするフォームフィールド
ExtJSの標準のライブラリではファイルアップロード用のフォームフィールドは用意されていません。ファイルのアップロードフィールドを作成するためには、uxのExt.ux.form.FileUploadFieldを使うことが比較的多いです。今回はこのUXを使ってファイルを送信するフォームパネルのサンプルです。
Ext.ux.form.FileUploadField
フォーム関連の過去の記事はこちらからです。
- ExtJS入門 ExtJSのフォームについて（基本編）
- ExtJS入門32 フォームパネルとフィールド(基本編)
- ExtJS入門33 Columnレイアウトのフォー
- ExtJS入門34 ComboBoxの基本
- ExtJS入門35 Tableレイアウトのフォーム
- ExtJS入門37 サーバーサイドで処理したフォームのエラーメッセージを表示するム
- ExtJS入門38 独自のVTypeを定義してフォームを検証する
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJS入門38 独自のVTypeを定義してフォームを検証する
今回はフォームのVTypeに独自のバリデーションを設定して、フォームの検証を行うサンプルです。
カスタムのVTypeを定義してフォームを検証する。
フォーム関連の過去の記事はこちらからです。
- ExtJS入門 ExtJSのフォームについて（基本編）
- ExtJS入門32 フォームパネルとフィールド(基本編)
- ExtJS入門33 Columnレイアウトのフォー
- ExtJS入門34 ComboBoxの基本
- ExtJS入門35 Tableレイアウトのフォーム
- ExtJS入門37 サーバーサイドで処理したフォームのエラーメッセージを表示するム
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.form.VTypesクラス
http://extdocs.xenophy.com/?class=Ext.form.VTypes
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJS入門37 サーバーサイドで処理したフォームのエラーメッセージを表示する
今回はExtJSのフォームのエラー表示の便利な方法を紹介します。一般的なwebアプリの場合、FormPanelからフィールドの値をサーバーに送信後サーバーサイドで値のチェックが実行されます。その際にエラーが見つかった場合にそれをフィールドへ通知する便利な方法がExtJSでは用意されています。
サーバーからのエラー結果を表示する
ポストした後、サーバーのチェックが行われエラーの結果がJSONで返ってくるフォームパネルのサンプルです。
フォーム関連の過去の記事はこちらからです。
- ExtJS入門 ExtJSのフォームについて（基本編）
- ExtJS入門32 フォームパネルとフィールド(基本編)
- ExtJS入門33 Columnレイアウトのフォー
- ExtJS入門34 ComboBoxの基本
- ExtJS入門35 Tableレイアウトのフォーム
- ExtJS入門36 HTMLの標準フォームにExtJSのフィールドを設置する
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.form.BasicFormクラス
http://extdocs.xenophy.com/?class=Ext.form.BasicForm
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJS入門36 HTMLの標準フォームにExtJSのフィールドを設置する
今回はExtJSのフォーム（フィールド）をHTMLのノーマルなインプットのようにform要素に仕込むサンプルを紹介します。
HTMLの標準フォームにExt.form.Textfieldをレンダリング
フォーム関連の過去の記事はこちらからです。
- ExtJS入門 ExtJSのフォームについて（基本編）
- ExtJS入門32 フォームパネルとフィールド(基本編)
- ExtJS入門33 Columnレイアウトのフォー
- ExtJS入門34 ComboBoxの基本
- ExtJS入門35 Tableレイアウトのフォーム
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.form.TextFieldクラス
http://extdocs.xenophy.com/?class=Ext.form.TextField
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJS入門35 Tableレイアウトのフォーム
今回はtableレイアウトのフォームの簡単な紹介です。基本的な部分はcolumnレイアウトのときと同じです。tableレイアウトではcolspan,rowspanを使ってレイアウトを設定します。ExtJS入門33 Columnレイアウトのフォーム
Tableレイアウトのフォーム
フォーム関連の過去の記事はこちらからです。
- ExtJS入門 ExtJSのフォームについて（基本編）
- ExtJS入門32 フォームパネルとフィールド(基本編)
- ExtJS入門33 Columnレイアウトのフォー
- ExtJS入門34 ComboBoxの基本
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.layout.TableLayoutクラス
http://extdocs.xenophy.com/?class=Ext.layout.TableLayout
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
ExtJS入門34 ComboBoxの基本
今回は以前紹グリッドのサンプルで簡単に紹介したコンボボックスを取り上げます。コンボボックスはHTMLフォームのセレクトボックスのような選択式のフォームを生成します。ExtJSのコンボボックスでは、項目のデータをストアから利用します。今回はグリッドの回で使ったサンプルのストアとデータを利用しています。
ComboBoxの基本
グリッド関連の記事
フォーム関連の過去の記事はこちらからです。
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.form.ComboBoxクラス
http://extdocs.xenophy.com/?class=Ext.form.ComboBox
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
