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;
}

包含网格的面板位于应用程序/视图/ clientdetails / clientdetails.js 所以我试着把css代码放进去应用程序/包/本地/我的经典-THEME2 / SASS / SRC /视图/ 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;
}

extjs6调整网格行高

1 个答案: