【问题标题】：How can I set grid row height in Extjs 4?如何在 Extjs 4 中设置网格行高？
【发布时间】：2019-02-22 08:40:06
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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

【讨论】：

谢谢零酷，我已经尝试按照你上面所说的添加.x-grid-cell-inner的样式表，但是网格行高仍然没有改变，我不知道为什么...
哦，我找到了问题，现在可以完美运行了！谢谢零酷：D

【解决方案2】：

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

JavaScript 代码

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

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

CSS 代码

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

【讨论】：