ExtJS勉強会＠名古屋資料 | ExtJSで楽しくRIA業務アプリ開発

カテゴリ ‘ExtJS勉強会＠名古屋資料’ 一覧

Ext.Carouselのインジケーター設定 | Sencha Touch Tips

without comments

はてなブックマーク - Ext.Carouselのインジケーター設定 | Sencha Touch Tips

Livedoorクリップ - Ext.Carouselのインジケーター設定 | Sencha Touch Tips

Sencha Touchにはいかにもタッチスクリーン向けなパネルとして、Ext.Carouselがあります。
このパネルはカードレイアウトのパネルの一種で複数のカードを左右（または上下）に一列にならべて、
スワイプジェスチャーによって切り替えることができます。

各カードの下にはインジケーターとして、○がアイテムの数だけ並んで現在のアイテムの位置は●になります。
今回はこのインジケーターの表示/非表示を簡単に切り替えるサンプルです。
インジケーターについての記述はほとんどAPIリファレンスに載っていないので、ソースコードを見ないとわかりません。

Ext.Carousel – Sencha Touch API Documentation
http://dev.sencha.com/deploy/touch/docs/?class=Ext.Carousel

・サンプルコード

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で設定したアニメーションで表示が切り替えられます。ただし現状では非表示するときのアニメーションしか効いてないようです。
インジケーターもコンポーネントとして扱えるので、もっと複雑なことできそうです。

佐竹裕行

1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。

Written by 佐竹裕行

9 月 1st, 2010 at 11:15 am

Posted in ExtJSチュートリアルｓｕｓ４版, ExtJS勉強会＠名古屋資料, Sencha Touch

ExtJS入門39　ファイルをアップロードするフォームフィールド

without comments

はてなブックマーク - ExtJS入門39　ファイルをアップロードするフォームフィールド

Livedoorクリップ - ExtJS入門39　ファイルをアップロードするフォームフィールド

ExtJSの標準のライブラリではファイルアップロード用のフォームフィールドは用意されていません。ファイルのアップロードフィールドを作成するためには、uxのExt.ux.form.FileUploadFieldを使うことが比較的多いです。今回はこのUXを使ってファイルを送信するフォームパネルのサンプルです。

Ext.ux.form.FileUploadField

フォーム関連の過去の記事はこちらからです。

Read the rest of this entry »

佐竹裕行

Written by 佐竹裕行

5 月 24th, 2010 at 6:15 pm

ExtJS入門38　独自のVTypeを定義してフォームを検証する

without comments

はてなブックマーク - ExtJS入門38　独自のVTypeを定義してフォームを検証する

Livedoorクリップ - ExtJS入門38　独自のVTypeを定義してフォームを検証する

今回はフォームのVTypeに独自のバリデーションを設定して、フォームの検証を行うサンプルです。

カスタムのVTypeを定義してフォームを検証する。

フォーム関連の過去の記事はこちらからです。

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.form.VTypesクラス
http://extdocs.xenophy.com/?class=Ext.form.VTypes

Read the rest of this entry »

佐竹裕行

Written by 佐竹裕行

5 月 21st, 2010 at 1:05 pm

ExtJS入門37 サーバーサイドで処理したフォームのエラーメッセージを表示する

without comments

はてなブックマーク - ExtJS入門37 サーバーサイドで処理したフォームのエラーメッセージを表示する

Livedoorクリップ - ExtJS入門37 サーバーサイドで処理したフォームのエラーメッセージを表示する

今回はExtJSのフォームのエラー表示の便利な方法を紹介します。一般的なwebアプリの場合、FormPanelからフィールドの値をサーバーに送信後サーバーサイドで値のチェックが実行されます。その際にエラーが見つかった場合にそれをフィールドへ通知する便利な方法がExtJSでは用意されています。

サーバーからのエラー結果を表示する

ポストした後、サーバーのチェックが行われエラーの結果がJSONで返ってくるフォームパネルのサンプルです。

フォーム関連の過去の記事はこちらからです。

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.form.BasicFormクラス
http://extdocs.xenophy.com/?class=Ext.form.BasicForm

Read the rest of this entry »

佐竹裕行

Written by 佐竹裕行

5 月 20th, 2010 at 3:21 pm

Posted in ExtJSチュートリアルｓｕｓ４版, ExtJS勉強会＠名古屋資料

Tagged with DateField, Ext.form.FormPanel, Ext.form.NumberField, Ext.form.TextField, ExtJS, JavaScript, JSON, TextField, Tips, エラーメッセージ, エラー処理, サンプル, チュートリアル, フォーム, フォームパネル

ExtJS入門36 HTMLの標準フォームにExtJSのフィールドを設置する

without comments

はてなブックマーク - ExtJS入門36 HTMLの標準フォームにExtJSのフィールドを設置する

Livedoorクリップ - ExtJS入門36 HTMLの標準フォームにExtJSのフィールドを設置する

今回はExtJSのフォーム（フィールド）をHTMLのノーマルなインプットのようにform要素に仕込むサンプルを紹介します。

HTMLの標準フォームにExt.form.Textfieldをレンダリング

フォーム関連の過去の記事はこちらからです。

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.form.TextFieldクラス
http://extdocs.xenophy.com/?class=Ext.form.TextField

Read the rest of this entry »

佐竹裕行

Written by 佐竹裕行

5 月 19th, 2010 at 1:02 pm

Posted in ExtJSチュートリアルｓｕｓ４版, ExtJS勉強会＠名古屋資料

Tagged with Ext.Button, Ext.form.TextField, JavaScript, js, renderTo, TextField, UI, イベント, エディター, サンプル, チュートリアル, フォーム, ボタン, 勉強会

ExtJS入門35 Tableレイアウトのフォーム

without comments

Livedoorクリップ - ExtJS入門35 Tableレイアウトのフォーム

今回はtableレイアウトのフォームの簡単な紹介です。基本的な部分はcolumnレイアウトのときと同じです。tableレイアウトではcolspan,rowspanを使ってレイアウトを設定します。ExtJS入門33 Columnレイアウトのフォーム

Tableレイアウトのフォーム

フォーム関連の過去の記事はこちらからです。

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.layout.TableLayoutクラス
http://extdocs.xenophy.com/?class=Ext.layout.TableLayout

Read the rest of this entry »

佐竹裕行

Written by 佐竹裕行

5 月 18th, 2010 at 1:18 pm

ExtJS入門34 ComboBoxの基本

with 2 comments

今回は以前紹グリッドのサンプルで簡単に紹介したコンボボックスを取り上げます。コンボボックスはHTMLフォームのセレクトボックスのような選択式のフォームを生成します。ExtJSのコンボボックスでは、項目のデータをストアから利用します。今回はグリッドの回で使ったサンプルのストアとデータを利用しています。

ComboBoxの基本

グリッド関連の記事

ExtJSで楽しくRIA業務アプリ開発のgridの記事一覧

フォーム関連の過去の記事はこちらからです。

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.form.ComboBoxクラス
http://extdocs.xenophy.com/?class=Ext.form.ComboBox

Read the rest of this entry »

佐竹裕行

Written by 佐竹裕行

5 月 17th, 2010 at 1:13 pm

フォームのレイアウトについてフォームパネルのではデフォルトで’form’レイアウトが設定されています。’form’レイアウトでは、fieldLabelを表示するなどフォームフィールドを設置に最適なレイアウトを提供してくれます。しかし複雑なフォームの配置ができません。フォームパネルのレイアウトコンフィグを変更することでより自由なレイアウトでフィールドを配置する方法を紹介します。
今回はcolumnレイアウトの紹介です。