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 可以自动将溢出的工具栏按钮转换为带有菜单项的菜单。要允许这种自动转换，您需要使用 config enableOverflow: true 配置您的 toolbar 组件

所以不要使用tbar 配置：

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

还可以考虑将按钮划分为更多按钮组。如果工具栏有更多的按钮组，ExtJS 工具栏可以更好地处理溢出。

摆弄现场示例：http://sencha.com/#fiddle/2nd