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

Was it helpful?

Solution

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top