sencha touch：タブバーの幅が画面の幅にならない

Question

tabPanelのtabBarを上の位置に置き、下のスタイルを維持するので、this threadを参照してください。表示結果はOKですが、タブバーはすべてのスペースをページの右上隅に背景が表示されます。 （私の1024px解像度で約30px）。 Chromeを使用して表示する場合、開発者ツールを開いて閉じると、タブバーが正常になります。 （すべての画面を占有する）。 tabPanel.doLayout（）またはviewPort.doLayout（）を試してみましたが、どちらも動作しません。

お願いします。ありがとうございました！

var tabPanel = new Ext.TabPanel({ 
     id:'tabPanel', 
     tabBar : { 
      dock : 'top', 
      layout : { pack : 'right' }, 
     }, 
     listeners: { 
       single: true, 
       afterlayout: function (panel) { 
        var dom = Ext.select('.x-docked-top', panel.getEl().dom).first().dom; 
        dom.className = dom.className.replace('x-docked-top', 'x-docked-bottom');     
       } 
     }, 
     defaults: { 
       scroll: 'vertical' 
     }, 
     cardSwitchAnimation: { 
      type: 'slide', 
      duration: 1 
     }, 
     flex: 1, 
     ui: 'light', 
     items : [ 
      { 
       iconCls : 'icon1', 
       items: [ scanPanel ]   
      }, 
      { 
       iconCls : 'icon2', 
       items: [ logPanel ]   
      } 
     ]  
}); 

...

var viewPort = new Ext.Panel({ 
    fullscreen : true, 
    layout : { 
     type : 'fit', 
     align : 'stretch' 
    }, 
    items : [ tabPanel] 
}); 

Answer 1

Ext.Panelは、パディングのデフォルト設定があり、Ext.Panelにタブバーを移動しよう。