ExtJS 4.1 如何更改网格面板标题高度

Posted 2023-02-26

【中文标题】ExtJS 4.1 如何更改网格面板标题高度

【英文标题】：ExtJS 4.1 How to change grid panel header height

【发布时间】：2012-07-26 18:50:42

【问题描述】：

我想更改 Ext.grid.Panel 标题高度。

grid panel header的高度被强制设置为28px。

没有 sass 设置 面板上的标题配置对我不起作用 在配置

这是我目前所拥有的（并且有效），但我不喜欢这个解决方案。

Ext.define('Ext.grid.Panel', 
    listeners: 
        beforerender: function (cmp, eOpts) 
            cmp.headerCt.setHeight(25);
        
    
);

此外，列标题似乎也固定为 28 像素。将标题的高度设置为 25 不会将列标题设置为 25。您还需要在 scss/css 中覆盖它。否则，您的列标题菜单将显示 28px 高度。

.x-column-header

    height: 25px;

此解决方案不起作用：如果拖动列标题，更改列的索引位置，它将中断 -.-

推荐？

【参考方案1】：

要设置列标题的高度，必须在它们编译后设置高度。同样，列配置的高度值不能设置高度 28。

我发现编译后修改高度可以正确设置高度并允许列可拖动（一切正常）。

Ext.define('Ext.grid.Panel', 
    listeners: 
        beforerender: function (cmp, eOpts) 
            cmp.columns[0].setHeight(25);
        
    
);

我的解决方案无法使用它，因为我创建了一个动态网格。在网格的动态部分，我使用 GRID.reconfigure(); - 通过销毁在渲染前状态下创建的任何内容。

Ext.define('Ext.grid.Panel', 
    listeners: 
        reconfigure: function (cmp, eOpts) 
            cmp.columns[0].setHeight(25);
        
    
);

重新配置后会触发重新配置功能，所以这就是我绕过动态网格重新配置的方法。

【参考方案2】：

您还可以为该网格面板使用 sass 子样式并设置“ui”配置：

将ui:'custom-height-item' 添加到您的配置中

@include extjs-panel-ui(
    'custom-height-item',
    $ui-header-line-height: 28px,
    $ui-header-padding: 2px;
    )

【讨论】：

如果你是通过 css 做的，这是一个很好的解决方案