Extjs：面板中的工具栏不调整大小浏览器调整大小

Question

我有一个工具栏和一个面板内的网格。在调整大小时，网格看起来不错。然而，工具栏保持其原始尺寸，不会调整大小，导致几个按钮隐藏。 我该如何纠正？

{ 
       xtype: 'panel', 
       region: 'center', 
       layout: 'border', 
       tbar:[ 
        { 

         xtype: 'buttongroup', 
         region: 'center', 
         items: getToolBarButtons()  // method to add buttons to toolbar dynamically 
        } 
       ], 
       items: [ 
        { 
         xtype: 'tabpanel', 
         activeTab: 0, 
         layout: 'fit', 
         region: 'center', 
         disabled: 'true', 
         items:[ 
          { 
           // grid 1 
           height : '80%', 
           width : '100%' 
          }, 
          { 
           // grid 2 
           height : '80%', 
           width : '100%' 
          } 
         ] 
        } 
       ] 
      } 

编辑：

我换成tbar与dockedItems: [{ xtype:' toolbar' ...}]。工具栏根本不会被渲染

Answer 1

Ext.toolbar.Toolbar可以自动将溢出的工具栏按钮转换为带有菜单项的菜单。为了让您需要使用配置enableOverflow: true

所以不是tbar配置使用配置toolbar组件此自动转换：

dockedItems: [{ 
    xtype: 'toolbar', 
    dock: 'top', 
    enableOverflow: true, 
    items: [ 
     { 
      xtype: 'buttongroup',     
      items: getToolBarButtons() 
     } 
    ] 
}] 

还考虑将按钮更buttongroups。如果工具栏有更多的按钮组，ExtJS工具栏可以处理溢出并获得更好的结果。

拨弄活生生的例子：http://sencha.com/#fiddle/2nd