Sencha Touch 2 で Ext.tab.Panel をネストさせるときハマった

タブパネルをネストさせたかった

タブパネルって iOS の下によくあるメニューみたいなあれね。具体的には以下のようなコード。まず、ベースとなるタブパネルを定義する。

Ext.define('MyApp.view.BaseTab', {
    extend: 'Ext.tab.Panel',

    config: {
        // したにおく
        tabBarPosition: 'bottom',

        items: [
          {
              // まあ xtype 指定
              xtype: 'hogehoge'

          },
          {
              // クラス指定でもよい
              xclass: 'MyApp.view.NextPanel'
          },
          {
              title: 'はい',
              iconCls: 'info'
          },
          {
              title: 'いいえ',
              iconCls: 'info'
          },
          {
              title: 'はい',
              iconCls: 'info'
          },
        ]
    }
});

で、それを継承したようなかたちの Ext.Panel をつくる。その中で Ext.tab.Panel を使用している

Ext.define('MyApp.view.NextPanel', {
  extend: 'Ext.Panel',

  requires: [
    'Ext.dataview.List'
  ],

  config: {
    title: 'はい',
    iconCls: 'info',
    scrollable: true,

    items: [
      {
        xtype: 'toolbar',
        docked: 'top',
        title: 'おれおれ'
      },
      {
        xtype: 'label',
        html: 'もげもげ'
      },
      {
        // ここでつかう！
        xtype: 'tabpanel',
        tabBarPosition: 'top',
        // これな！！！！
        height: 300,
        items: [
          {
            title: 'はいはい',
            xtype: 'list',
            // これもな！！！！
            height: 300,
            itemTpl: '{haihaihaihai}',
            store: {
              data: [
                {haihaihaihai: 'haihaihaihaimoge'},
                {haihaihaihai: 'haihaihaihaihate'},
                {haihaihaihai: 'togaadf'}
              ]
            }
          },
          {
            title: 'いいえいいえ',
            xtype: 'list',
            // これもな！！！！
            height: 300,
            itemTpl: '{iieiieiieiie}',
            store: {
              data: [
                {iieiieiieiie: 'iieiieiieiieange'},
                {iieiieiieiie: 'iieiieiieiietoge'},
                {iieiieiieiie: 'iieiieiieiiehage'}
              ]
            }
          }
        ]
      }
    ]
  }
});

前回でやった「Ext.dataview.List のときは height 指定な！！！！」ってのは学習したからかいてたんだけど、どうも Ext.tab.Panel も height 指定しないと要素はあっても描画がされない。もうちょっと正確に言うと、トラブルシューティングしたときにどうもみてみると自動生成される親要素の x-dock-body が実は 0px だったから子要素がいくら 500px とか指定しても表示できないわけだ。

トラブルシューティングの軌跡

振り返ろう

• なんか表示できないよ？
• どうやら、子要素は height 指定しているから DOM の中に要素が存在している。Web Inspector でみるとどうやら要素の領域は確保されているようだ。
• なのに表示がされない。
• ということはなにか別のところがあやしい？
• まずは list じゃなくて label とか button でやってみよう
  • だめだ
  • ということは xtype に関係なく中身がレンダリングされてない
• ためしに label で hoge- とかいれてみる
  • どうにかして Web Inspector でその文字列を表示させようとする
  • なんかいろいろフォントおおきくしたり position したりしてもだめだな……
  • あ！なんかこれそもそも親要素の height が 0 じゃね？？？？
  • 実際 x-dock-body を変更したら表示できた！
• ということは、親要素の問題
• tabpanel 自体に height 指定すればできた

結論

Sencha Touch 2、iOS と Android でおいしいことできるなんてそう甘いことはない