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%' 
          } 
         ] 
        } 
       ] 
      } 

Edit:

я заменил tbar с dockedItems: [{ xtype:' toolbar' ...}]. Панель инструментов не отображается вообще

Answer 1

Ext.toolbar.Toolbar может автоматически преобразовывать переполненные кнопки панели инструментов в меню с элементами меню. Чтобы это позволило автоматические преобразований, необходимые для настройки toolbar компонента с конфигой enableOverflow: true

Так вместо tbar использования конфигурации:

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

Также рассмотреть разделив кнопки более buttongroups. Если панель инструментов имеет большее количество элементов, панель инструментов ExtJS может обрабатывать переполнение с лучшими результатами.

Fiddle с живым примером: http://sencha.com/#fiddle/2nd