Ext.Carouselのインジケーター設定 | Sencha Touch Tips
Sencha Touchにはいかにもタッチスクリーン向けなパネルとして、Ext.Carouselがあります。
このパネルはカードレイアウトのパネルの一種で複数のカードを左右(または上下)に一列にならべて、
スワイプジェスチャーによって切り替えることができます。
各カードの下にはインジケーターとして、○がアイテムの数だけ並んで現在のアイテムの位置は●になります。
今回はこのインジケーターの表示/非表示を簡単に切り替えるサンプルです。
インジケーターについての記述はほとんどAPIリファレンスに載っていないので、ソースコードを見ないとわかりません。
・サンプルコード
Show/Hide Carousel Indicator – jsdo.it – share JavaScript, HTML5 and CSS
インジケーターの初期設定はExt.Carouselのindicatorコンフィグで行えます。
indicator : Boolean
Provides an indicator while toggling between child items to let the user know where they are in the card stack.
APIリファレンスによると受け付けるのはBooleanとのことですが、ソースコードを見ると以下のようになっています。
インジケーターについての記述はこれくらいで、他の情報がありません。なのでソースコードを見ます。
//Ext.Carouselクラス
initComponent: function() {
・
・
・
if (this.indicator) {
var cfg = Ext.isObject(this.indicator) ? this.indicator : {};
this.indicator = new Ext.Carousel.Indicator(Ext.apply({}, cfg, {
direction: this.direction,
carousel: this,
ui: this.ui
}));
}
Ext.Carousel.superclass.initComponent.call(this);
},
・
・
・
indicatorコンフィグにオブジェクトが渡された場合、Ext.Carousel.Indicatorクラスのコンフィグオプションとしてバイパスするようになっています。
またCarouselが生成されると、このインスタンスのindicatorにはExt.Caorousel.Indicatorオブジェクトが設定されます。
つまり
- Ext.CarouselのindicatorコンフィグにはExt.Carousel.Indicatorクラスのコンフィグが渡せる。
- Ext.Carouselのindicatorコンフィグにtrueを渡すとデフォルトのExt.Carousel.Indicator、falseだと何も生成しない。
- Ext.CarouselオブジェクトのindicatorプロパティによってExt.Carousel.Indicatorオブジェクトが参照できる。
Ext.Carousel.IndicatorクラスはExt.Componentのサブクラスなので、Ext.Componentで設定できるコンフィグは受け付けることができます。サンプルコードではインジケーターの初期値にhiddenとshowAnimationを設定しています。
indicator:{
hidden:true,
showAnimation:{
type:'fade'
}
}
サンプルコードではさらにツールバーの稲妻ボタンで、インジケーターの表示/非表示を切り替えています。
if (carousel.indicator.isVisible()){
carousel.indicator.show();
}else{
carousel.indicator.hide();
}
ここではコンフィグで設定した、showAnimationで設定したアニメーションで表示が切り替えられます。ただし現状では非表示するときのアニメーションしか効いてないようです。
インジケーターもコンポーネントとして扱えるので、もっと複雑なことできそうです。
Ext JS/Sencha Touch入門40 Ajaxリクエスト処理
今回はExt JS,Sencha Touchのどちらでも非常によく使うAjaxの処理を紹介します。
サンプルコードはSencha Touchですが、Ajaxリクエストの処理はExt JSでもほぼ同じです。
まず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アニメを作って設定しています。
マスクを外すときは同様に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
7月のExt JS勉強会(東京)「Sencha Touchのはじめかた 」まとめ
7月の勉強会(東京)のまとめになります。
開発環境
→ 好きなやり方。とりあえずささっと試したいならjsdo.itがおすすめ。コードの共有もできる。デバイスに依存しない部分なら結構使える。
検証機(タッチパネルデバイス)
→ iPhone 3GS以降 or iPad が無難。Mac があるならiPhone シュミレーターが一番安定している。iPhone 3G,Android端末は微妙。
APIリファレンス
→ 発表し忘れ項目。Sencha Touchを学ぶうえで公式のAPIリファレンスはとても重要。Ext JSほど充実していないが、サンプルコードも載っているのですごく参考になります。Sencha Touchのパッケージにも入っていますが、以下のURLで見れます。もちろん英語です。
http://www.sencha.com/deploy/touch/docs/
本家フォーラム
→ Sencha はExt の頃からforumで活発な議論が交わされています。Sencha のメンバーからのリプライも早いので、バグっぽいものを見つけたらとりあえずforum内を見てみると以外とすでに質問があがっていたりします。Sencha Touchのライブラリ自体に怪しい部分がたくさんあるので、困ったら覗いてみると良いかもしれません。
http://www.sencha.com/forum/
Twitter Updates for 2010-07-29
- UStream中継10分ぐらい前から始まりました (#extjapan live at http://ustre.am/gab3 ) #
- 配信レート若干下げました。皆さん調子よさそうでしょうか? (#extjapan live at http://ustre.am/gab3 ) #
- @shirotorabyakko http://extjs.blog.sus4.co.jp/ でいろいろ公開しています in reply to shirotorabyakko #
- これはいいな Yubizo Engine (#extjapan live at http://ustre.am/gab3 ) #
Powered by Twitter Tools
Sencha Touch 入門:Sencha Touchのはじめかた(Ext JS & Sencha Touch勉強会7月@東京)のサンプルコード
2010/7/25のExt JS & Sencha Touch勉強会7月@東京でのsus4 佐竹の担当箇所のSencha Touch入門篇で使うサンプルコードをjsdo.itで公開しました。
明日の勉強会では、PCのブラウザでも動作するサンプルばかりですので、jsdo.it上でも動作を確認できます。
また簡単なサンプルばかりですので、forkしていただいて実際に手を動かしてももらうとより理解が深まると思います。
勉強会では持ち時間的に2,3つしか紹介できないと思います。
勉強会のアジェンダはこちらです。
Sencha Touch 入門: Ext JS & Sencha Touch勉強会7月@東京(2010/7/25 )のアジェンダ
Sencha Touchのはじめかたサンプルコード
Sencha Hello, World!
Hello, World! – jsdo.it – share JavaScript, HTML5 and CSS
続きを読む »
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の記事
Twitter Weekly Updates for 2010-07-18
- ちょっと宣伝です。うちの森中がやります。インタネット動画マーケティングセミナー from 名古屋 to 熊本。本日20時15分頃開始予定。USTのチャンネルはこちらです。→ http://www.ustream.tv/channel/dougana #
Powered by Twitter Tools
Twitter Updates for 2010-07-17
- ちょっと宣伝です。うちの森中がやります。インタネット動画マーケティングセミナー from 名古屋 to 熊本。本日20時15分頃開始予定。USTのチャンネルはこちらです。→ http://www.ustream.tv/channel/dougana #
Powered by Twitter Tools
Twitter Weekly Updates for 2010-07-04
- ExtJSブログをセグメント中。Senchaを気にしてくる人は、やっぱ営業時間外なんですね。仕事というよりは、まだ実験的要素が強そうですね。http://extjs.blog.sus4.co.jp/ #
Powered by Twitter Tools
Twitter Updates for 2010-07-01
- ExtJSブログをセグメント中。Senchaを気にしてくる人は、やっぱ営業時間外なんですね。仕事というよりは、まだ実験的要素が強そうですね。http://extjs.blog.sus4.co.jp/ #
Powered by Twitter Tools




