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

时间:2012-07-26 18:50:43

标签: extjs4 gridpanel

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

网格面板标题的高度被强制设置为28px。

  1. 没有sass设置
  2. 面板上的标题配置对我不起作用
  3. 修改网格列高度似乎在配置< 28px。 28px似乎是最低限度。
  4. 这是我到目前为止(它有效),但我不喜欢这个解决方案。

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

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

    .x-column-header
    {
        height: 25px;
    }
    

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

    Recommedations?

2 个答案:

答案 0 :(得分:2)

要设置列标题的高度,必须在编译后设置高度。同样,列配置的高度值不能用于设置高度< 28,但是工作> 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);
        }
    }
});

重新配置功能在重新配置后触发,这就是我对动态网格重新配置的了解。

答案 1 :(得分:2)

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

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

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