Question

我在Panel中有一个工具栏和一个网格。在调整大小时，网格看起来很好。但是，工具栏会保持其原始尺寸，并且不会调整大小，从而导致隐藏一些按钮。我该如何纠正这个问题？

{
                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()
      }
   ]
}]

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

摆弄实例： http://sencha.com/#fiddle/2nd

Extjs：面板内的工具栏没有在浏览器调整大小时调整大小

1 个答案: