如何完全隱藏dockedItems工具欄

我可以在TabPanel的dockedItem中隱藏項目，但我想臨時隱藏整個dock，因爲工具欄本身仍佔用空間，其餘內容不會填滿屏幕。如何完全隱藏dockedItems工具欄

到目前爲止，我不喜歡這樣：

myApp.views.productList.dockedItems.items[0].removeAll(true); 
myApp.views.productList.doComponentLayout();

或者：

myApp.views.productList.getComponent('search').removeAll(true); 
myApp.views.productList.doComponentLayout();

但無論是刪除dockedItems工具本身。

我甚至試圖給dockandItems單獨和集體id:刪除整個組件，但沒有運氣。我也嘗試將有問題的工具欄移出停放的項目，並將其放入包含面板的items:屬性中，但這會打破我應用程序中其他目前我不想更改的內容。

任何線索如何做到這一點？

來源

2011-07-19 Old McStopher

如果我正確理解你，你想暫時從tabPanel中刪除tabBar。我能夠通過給我的tabBar然後使用removeDocked和addDocked方法來實現這一點。我對sencha-touch很陌生，所以最有可能有這樣做的更好的方法

下面的代碼從tabPanel中刪除tabBar，然後再次將其添加回來。

Ext.setup({ 

onReady: function() { 

    var tabpanel = new Ext.TabPanel({ 

     ui  : 'dark', 
     sortable : true, 
     tabBar:{ 
      id: 'tabPanelTabBar' 
     }, 
     items: [ 
      {title: 'Tab 1',html : '1',cls : 'card1'}, 
      {title: 'Tab 2',html : '2',cls : 'card2'}, 
      {title: 'Tab 3',html : '3',cls : 'card3'} 
     ] 
    }); 

    var paneltest = new Ext.Panel({ 
     fullscreen: true, 
     dockedItems:[ 
      { 

       xtype: 'button', 
       text: 'Disable TabBar', 
       scope: this, 
       hasDisabled: false, 
       handler: function(btn) { 

        console.log(btn); 
        if (btn.hasDisabled) { 

         tabpanel.addDocked(Ext.getCmp('tabPanelTabBar'), 0); 

         btn.hasDisabled = false; 
         btn.setText('Disable TabBar'); 
        } else { 

         tabpanel.removeDocked(Ext.getCmp('tabPanelTabBar'), false) 

         btn.hasDisabled = true; 
         btn.setText('Enable TabBar'); 
        } 
       }} 
     ], 
     items:[tabpanel] 
    }); 
    paneltest.show() 
}

}）

來源

2011-07-19 18:54:28 MrGreen

這做到了！ Mine實際上是用於刪除沒有tabBar集的子tabPanel的dockedItems，但是這有效。正如您所示，我需要使用的方法是「removeDocked」。謝謝！ –

請注意，搜索Sencha Touch API文檔不會爲此方法返回任何內容！ ...但是在進入Ext.Panel文檔時，它實際上列出了。 –

如何完全隱藏dockedItems工具欄

回答

相關問題