extjs6调整网格行高度

Question

我正在尝试更改extjs网格中的行的高度。阅读extjs6文档中的主题指南，尝试理解实现这一目标的不同方法。据我所知，最常见的方法是创建一个cls：。我尝试使用了一个小提琴的例子，但似乎什么也没做。

    Ext.create('Ext.grid.Panel', {
    store: store,
    cls: 'custom-grid',
    columns: [
        {text: "Name", width:120, dataIndex: 'Name'},
        {text: "DOB", width: 120, dataIndex: 'dob', renderer: Ext.util.Format.dateRenderer('M d, Y'), },
        {text: "Age", width:40, 
            renderer : function(value, metaData, record, rowIdx, colIdx, store, view){
                return calcAge(record.get('dob'));
            }
        }

    ],
    renderTo:'example-grid',
    width: 320,
    height: 280,
    viewConfig: { 
        stripeRows: false, 
        getRowClass: function(record) { 
            return calcAge(record.get('dob')) < 18 ? 'minor' : 'adult'; 
        } 
    } 
});            

})；

下面是我正在尝试使用的css

.custom-grid .x-grid-row-table TD {
line-height: 4px;
}

.custom-grid .x-grid-row { 
height: 25px;
}

-下面的区域现在似乎起作用了

这似乎很管用，但是我不知道把css放在我的文件结构中的什么位置

.custom-grid .x-grid-row {
background: red;
line-height: 1px;
}

包含网格的面板位于应用程序/视图/客户端细节/客户端细节.js中，因此我尝试将css代码放入app/packages/local/my-classic-theme2/sass/src/view/clientdetails/clientdetails.scss中。

Answer 1

我已经根据您的代码片段制作了一个https://fiddle.sencha.com/#fiddle/1cd6，它展示了如何根据通过getRowClass方法添加的CSS类自定义行高。

CSS非常简单：

.custom-grid .minor {
    background: red;
    height: 50px;
}

.custom-grid .adult {
    background: blue;
}