如何在Extjs 4中设置网格行高？

Question

我在我的项目中使用Ext.grid.Panel，但我认为默认行高太大而且我无法修改行高，所以整个网格让我感到不舒服。

但是，我发现Extjs-4 doc中的面板网格示例非常好。在其中调整行高以适应单词高度。因此整个网格非常紧凑。

所以我想知道如何设置网格行高度？

Answer 1

一种可以改变行高的方法是使用css。每行使用填充以及高度的内容，因此如果您更改此类中的填充，则会使行更高/更低：

.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

Answer 2

以下代码使用网格的getRowClass函数为特定行指定CSS类：

JavaScript Code

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

然后可以使用CSS修改高度：

CSS Code

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