タブが増えない。

ナビゲーションに配置したボタンにハンドラを定義して、クリックしたらメインタブパネルにタブを追加するようにしたつもりなんだが、動いてくれない(タブが増えない)。
なんでだろう。

var tabs = Ext.widget(aliasで指定した文字列);

ってやると意図したオブジェクトが取得できているように見えるんだが、addTabしても表示されないんだよな〜。なんでかな〜。

2011/05/27 追記

ExtJSの公式?リファレンスで該当する記述を発見できていないからなんとも言えないけど、チュートリアルのお作法?っぽいのは理解した。


なんでもそうだけど、イベントのハンドラは引数にアクションが発生したコンポーネントオブジェクトを持つ。
これはjavascriptだけでなくてJavaでもC#でも同じだけど、やはりここから取得していくみたい。


今回の場合、「ナビゲーションエリアのメニュー用ボタンをクリックしたら、メインのエリアになっているタブパネルに該当するタブを表示させる」処理をしたいので、クリックしたボタンから最外枠のオブジェクトViewportをとってきて、その子であるオブジェクトMainTabsを取得したい。なので、コントローラPlatfromはこんな感じになる。

// Platform.js
Ext.define(
  'Decshee.controller.Platform',
  {
    extend: 'Ext.app.Controller',
    views: [ /* (※省略) */ ],
    stores: [ /* (※省略) */ ],
    models: [ /* (※省略) */ ],

    init: function() {
      this.control(
        {
          // (※省略) ,
          // メニュー用ボタンへのイベントハンドラ登録。
          'menuentry': {
            click: this.showMenu
          }
        }
      );
    },

    // (※省略) ,

    showMenu: function(entry) {
      // 親のviewportオブジェクトを取得
      var viewport = entry.up('viewport');

      // viewportオブジェクトの子であるMainTabs(インスタンス生成する際に、itemId属性に"maintabs"を指定している)を取得。
      var maintabs = viewport.child ('#maintabs');

      // MainTabsオブジェクトのshowTabメソッドをコール。
      maintabs.showTab(entry);
    }

これで、MainTabs.js側で定義していたshowTabメソッドがコールされて新しいタブが表示されることを確認できた!
なんかそれっぽくなってきましたよ〜。