Extjs : Toolbar inside a panel not resizing on Browser resize

Question

I have a toolbar and a grid within a Panel. On resize, the grid looks good. However the toolbar maintains its original dimensions and does not resize causing a few buttons to hide . How do I rectify this?

{
                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:

I replaced tbar with dockedItems: [{ xtype:' toolbar' ...}] . The toolbar doesn't get rendered at all

Answer 1

Ext.toolbar.Toolbar can automatically transform overflowed toolbar buttons to menu with menu items. To allowed this automatic transformations you need to configure your toolbar component with config enableOverflow: true

So instead of tbar config use:

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

Also consider dividing buttons to more buttongroups. If toolbar has more buttongroups ExtJS toolbar can handle overflow with better results.

Fiddle with live example: http://sencha.com/#fiddle/2nd