我想要一个只有两列的网格,一列用于名称,另一列用于百分比。最后一行的名称为“总计”,总百分比为“百分比”。只有这一行的样式与其他行不同。请指导我如何完成此操作。 谢谢..
最佳答案
有一个网格功能可以实现这一点。它被覆盖了here在文档中有一些如何使用它的例子。
您还可以通过在您的 css 中提供您自己的 x-grid-row-summary
类实现来自定义样式。
编辑
下面是设置摘要行样式的一些示例,如您所见,有几种方法可以实现。意识到在 viewready
事件发生之前无法引用摘要行,它在 afterrender
事件中还没有准备好,所以我将所有这些逻辑放在一个 中viewready
监听器:
Ext.create('Ext.grid.Panel', {
features: [{
ftype: 'summary'
}],
// other grid configs ...
listeners: {
viewready: function(grid) {
// get reference to the summary row
var summaryRow = grid.view.el.down('tr.x-grid-row-summary');
// this will apply a css class to the row, in this example,
// I am applying the extjs grid header style to my summary row
summaryRow.addCls('x-grid-header-ct');
// or, to do it all in javascript as you mentioned in the comment
// first you would create a style object, I took these style
// properties from the .x-grid-header-ct
aStyleObject = {
cursor: 'default',
zoom: 1,
padding: 0,
border: '1px solid #d0d0d0',
'border-bottom-color': '#c5c5c5',
'background-image': 'none',
'background-color': '#c5c5c5'
}
// then you pass the style object using setStyle
summaryRow.setStyle(aStyleObject);
// or you could set the style for each cell individually using
// addCls or setStyle:
Ext.Array.each(summaryRow.query('td'), function(td) {
var cell = Ext.get(td);
cell.addCls('some-class');
// or
cell.setStyle(anotherStyleObject);
});
}
}
});
关于javascript - extJs 4 网格自定义 - 最后的总行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9751028/