解决方法
有一个网格功能来完成这一点.它在文档中涵盖了
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); }); } } });