前回のエントリで、困ったらインスペクタのConsoleでオブジェクトダンプして色々と取ればなんとなく大丈夫そうだと分かった。今回は、それも使いつつイベントの書き方色々を説明していくことにする。

[event 01b]
これは、ObservableのaddListenerに載っていたcontainer.onしてdelegateにボタン指定とイベント指定する方法を使用している。

tabPanel.on({
// Ext.Buttons have an xtype of 'button', so we use that are a selector for our delegate
  delegate: 'button',
  tap: function() {
    console.log('Button tapped!');
    alert('Button tapped!');
  }
});

もう一つはQ&Aに載っていた方法で、

panel.element.on('tap', this.doSomething);

というのがあり、この形に従ってelement部分にbody、イベントにタップ、そしてファンクションという形で作ってある。

myContainer.body.on('tap', function(evt){
  console.log('myContainer tap------------');
  console.log(myContainer);
});			

[event 01c]
こちらではボトムに設置したボタンでイベントの設定方を変えながら確認してみている。
jsのソースコードではdockedItemsあたりにボタンが入っている。
下左から見ていくことにする。

一番左の「Back」のテキストが入ったボタンは、configオプションのhandler指定だ。

{ ui: 'back', text: 'Back', handler: tapbtn},

var tapbtn = function(button) {
  overlay.showBy(button);
};

次の「hoge Button」は01bでも使った変数宣言(var hogebutton)してonで指定するものだ。
itemsへは配列にhogebuttonを入れておくだけで良い。

var hogebutton = Ext.create('Ext.Button', {
  text: 'hoge Button'
});

hogebutton.on('tap', function(evt){
  console.log('hoge tap------------');
  console.log(evt);
});

items: [
  { ui: 'back', text: 'Back', handler: tapbtn},
  hogebutton,
  ・・・
]

次にある「Default」テキストが入ったボタンでは、ドキュメントやQ&Aにあったコントローラからid指定する方法をとっている。

{ xtype: 'button', text: 'Default', id:'defBtn' },

var onDefBtnTap = function(){
  console.log('onDefBtnTap--------');
}

this.control({
  '#defBtn': {
    tap: onDefBtnTap
  }
});

この#defBtn部分がidでありtapがイベント名である。

次の「Round」テキストが入ったボタンでは、configオプションでlistenersとしてイベントとハンドラを指定する方法をとっている。これはこの後で説明するsegmented buttonで使われていたのを見て、もしかすると単体のボタンでも動くのでは無いかと思い試してみたら動作したものだ。
引数の中身を確認するためconsole.logでそれぞれのオブジェクトを直指定してある。

{ ui: 'round', text: 'Round' ,
  listeners: {
    tap: function(button, event, obj,cntr,d){
      console.log('round button-----------');
      console.log(button);
      console.log(event);
      console.log(obj);
      console.log(cntr);
      console.log(d);
      console.log('--------------');
     }
  }
},

最後はsegmented buttonになる。これはドキュメントにあった方法を参考に作った。

{
  xtype: 'segmentedbutton',
  items: [
    { text: 'Option 1' },
    { text: 'Option 2', pressed: true },
    { text: 'Option 3' }
  ],
  listeners: {
    toggle: function(container, button, pressed,obj,cntr,e){
      console.log('segmentedbutton------------');
      console.log(container);
      console.log(button);
      console.log(pressed);
      console.log(obj);
      console.log(cntr);
      console.log(e);
      console.log("User toggled the '" + button.getText() + "' button: " + (pressed ? 'on' : 'off'));
    }
  }
}

「Round」ボタンと引数で違うのは、ボタングループであるcontainerがひとつ増えbuttonが選択された物になっている点だ。

おおよそ普段使うイベントはこのくらいな気がするので、次回はMVCに入るつもりだ。
このMVCでアプリケーションを作るための基礎が出来上がるくらいだと見てるので、Sencha Touch2は一区切りにする予定だ。