ExtJSで楽しくRIA業務アプリ開発

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