sencha touchカルーセルlisternerとパネル上にアイテムインデックスを表示

Question

私は一度に1つずつイメージを表示するために、センチャタッチベースのカルーセルを作成しています。 カルーセルの上にはdockedItemがあります。その中で、画像のシリアルナンバー（例えば1のうちの1つなど）を表示したいと思います。

私はどのようなイベントを処理すべきか、どのメソッドを使ってテキストを更新するべきかを特定できません。

私はsencha touch 1.1を使用しています。ここで

は私のカルーセルのコードです：

var carousel= new Ext.Carousel({ 
    fullscreen: true, 
    dockedItems: [{ 
     overlay: true, 
     dock: 'top', 
     xtype: 'toolbar', 
     style: 'opacity: 0.6;', 
     items:[{ 
      xtype: 'button', 
      text: "Main menu", 
      }, 
      { xtype: 'spacer' }, 
      { 
       text: '', 
       ui: 'action', 
       listeners: 
       { 
       onCreate : function() 
        { 
        console.log(this.getActiveIndex().toString()); 
        this.text=this.getActiveIndex().toString(); 
        this.doLayout(); 
        }, 
       } 
      } 
      ], 
      listeners: 
      { 
       launch : function() 
       { 
        console.log(this.getActiveIndex().toString()); 
        this.text=this.getActiveIndex().toString(); 
        this.doLayout(); 
       }, 
      } 
     }, 
     { 
      overlay: false, 
      dock: 'bottom', 
      xtype: 'toolbar', 
      style: 'opacity: 0.75;', 
      items: 
       { 
        html: '<img style="display: block; margin-left: auto; margin-right: auto;" alt="" src="images/options.png" onclick="return loadOptionPage();">' 
       } 
     }], 

    layout:'card', 
    items:[ 
        { 
          cls: "figure1 figure" 
        }, 
        { 
          cls: "figure2 figure" 
        }, 
            { 
             cls: "figure3 figure" 
            }, 
            { 
             cls: "figure4 figure" 
            }, 
            { 
             cls: "figure5 figure" 
            } 
           ], 
           listeners: {    
            cardswitch:    
            {     
             fn: function()     
             {     
              //alert(this.getActiveIndex()); 
              var indx=this.getActiveIndex(); 
              var str=''; 
              str="hello"+indx.toString(); 
              this.dockedItems.items[1].html="<div>"+str+"</div>"; 
              carousel.doComponentLayout(); 
              console.log(str); 
              this.doLayout(); 
             }    
            },    
           } 
     }); 

Answer 1

ユーザーがカードを変更した後、あなたはactive indexをチェックして、カルーセルのcardswitch event.Itであなたのツールバーのタイトルを設定することができますafterrenderイベント

Answer 2

が自動的に発射される使用します。

this.topBar = new Ext.Toolbar({ 
     dock: 'top', 
     title: '' 
}); 

とcardswitchイベントに

this.topBar.setTitle(activeIndex)