extJs 4 网格自定义 - 最后的总行答案

【问题标题】：extJs 4 grid customization - Total row at the endextJs 4 网格自定义 - 最后的总行
【发布时间】：2012-03-17 15:05:05
【问题描述】：

我想要一个只有两列的网格，一列用于名称，另一列用于百分比。最后一行将以“Total”作为名称，将总百分比作为“percentage”。仅此行的样式将与其他行不同。请指导我如何做到这一点。谢谢..

【问题讨论】：

标签： javascript extjs extjs4

【解决方案1】：

有一个网格功能可以做到这一点。它在文档中的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);
            });
        }
    }
});

【讨论】：

我可以通过 ExtJs 中的配置修改网格 css。我的意思是行的背景颜色，borer 样式，x-grid-row-summary 颜色都来自 Js ??
@dev 我添加了一些设置摘要行样式的示例

【解决方案2】：

如果我们有摘要行 (like this)，我们可以在特定页面上使用 CSS。

<style>
.x-grid-row-summary .x-grid-cell{
    background-color: #f00 !important;
    font-size: x-large !important;
}

【讨论】：