Geek asks and answers

How to set grid line height in Extjs 4?

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

However, I think the panel-to-panel example in an Extjs-4 document is not bad. In it, the height of the line is adjusted to match the height of words. Thus, the entire grid is very compact.

So wondering, how can I set the height of the grid line?

+3
source share
2 answers

One way to change the line height is to use css. Each row uses padding and content for height, so if you changed the padding in this class, this would make the line higher / lower:

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

, :

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

+4

JavaScript

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

},

CSS

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

More articles:


All Articles