Extjs 4.1 Cómo cambiar la altura del encabezado del panel de la cuadrícula

Question

Quiero cambiar la altura del encabezado ext.grid.Panel.

La altura de un encabezado del panel de la cuadrícula está configurado a la fuerza en 28px.

1. No hay ajustes de SASS
2. La configuración del encabezado en el panel no funcionó para mí
3. Modificar la altura de las columnas de cuadrícula parece funcionar cuando se configura <28px.28px parece ser el mínimo.

   Esto es lo que tengo hasta ahora (y funciona), pero no me gusta la solución.

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

   Además, los encabezados de columna parecen ser fijos en 28px también.El ajuste de la altura del encabezado a 25 no establecerá el encabezado de la columna a 25. Debe anular eso también en el SCSS / CSS.De lo contrario, los menús de encabezado de la columna mostrará la altura 28px.

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

   Esta solución no funciona: si arrastra los encabezados de la columna, cambiando la posición de índice de la columna, se romperá -.-

   ¿Recomendaciones?

Answer 1

Para establecer la altura de los encabezados de la columna, debe establecer la altura después de su compilación.Nuevamente, el valor de altura para la configuración de la columna no funciona para establecer la altura <28, pero funciona> 28.

He encontrado que modificar la altura después de la compilación establece correctamente la altura y permite que las columnas sean arrastrables (todo funciona como debería).

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

Mi solución no pudo usar esto porque creo una cuadrícula dinámica.En la parte dinámica de la cuadrícula, uso Grid.ReconFigure ();- Allí destruyendo cualquier cosa que se creó en un estado de antes.

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

La función de reconfiguración se incendia después de la reconfiguración, por lo que así es como obtuve la reconfiguración de la cuadrícula dinámica.

Answer 2

También puede usar SASS Substyles para ese Gridpanel y configurar la configuración 'UI':

Agregar ui:'custom-height-item' a su configuración

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