¿Cómo puedo configurar la altura de la fila de la cuadrícula en Extjs 4?

I use Ext.grid.Panel in my project, but I think the default row height is too large and I can't modify the row height, so the whole grid makes me feel uncomfortable.

However, I find the panel-grid example in Extjs-4 doc is quite good. In it the row height is adjusted to fit the words height.Thus the whole grid is very compact.

So I wonder how can I set the grid row height?

preguntado el 22 de mayo de 12 a las 16:05

2 Respuestas

One way you could change the row height is by using css. Each row uses padding along with the content for the height so if you were change the padding in this class it would make the row higher/lower:

.x-grid-cell-inner {
    overflow: hidden;
    padding: 3px 6px;
    white-space: nowrap;
 }

Also, you can take a look here:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.view.Table-method-getRowClass

contestado el 22 de mayo de 12 a las 20:05

Thank you Zero Cool, I have tried to add the .x-grid-cell-inner's stylesheet as you said above, but the grid row height still didn't change, I don't know why... - arturo yoo

Oh, I find the problem and it can work perfectly now! Thank you Zero Cool :D - arturo yoo

El siguiente código usa un getRowClass function for the grid to specify a CSS class for specific rows:

Código JavaScript

viewConfig : {  
    forceFit : true,  
    getRowClass : function(record, index) {  
        if (index % 2 == 0)  
            return "red";  
        else  
            return "green";  
    }  
},  

The height can then be modified with CSS:

Código CSS

.red .x-grid-cell {  
     background-color: #FFFFDD;  
     height: 30px;
} 

Respondido 22 Feb 19, 00:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.