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

Posted 2023-02-26

【中文标题】Extjs：面板内的工具栏未在浏览器调整大小时调整大小

【英文标题】：Extjs : Toolbar inside a panel not resizing on Browser resize

【发布时间】：2014-01-15 12:06:46

【问题描述】：

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

                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' ...] 。工具栏根本没有被渲染

【参考方案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

【讨论】：

我为 tbar 尝试了 enableOverflow: true。我没有看到溢出菜单。这种行为是否与写作 dockedItems 而不是 tbar 有关？

是的。使用tbar: []，您只能定义工具栏中的项目，而不是工具栏配置。所以你应该使用dockedItems 的完整定义，正如我在答案中显示的那样（你可以在文档中看到tbar 只是dockedItems: [ xtype: 'toolbar', dock: 'top', ... 的简写）

参考我之前的 edit ，我将 tbar 替换为 dockedItems: [ xtype:' toolbar' ...] 。工具栏根本没有被渲染

我设置了现场示例：fiddle.sencha.com/#fiddle/2nd 布局与您在问题中的相同。工具栏在dockedItems 配置中定义，您可以看到它已呈现并且溢出管理正在工作。

现在工作正常。非常感谢！