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

extJs 4 grid customization - Total row at the end

提问by dev

I want a grid with only two columns, one is for name and the other for percentage. The very last row will have 'Total' as the name and the total percent as 'percentage'. This row only will be styled differently than the other rows. Please guide me how can i accomplish this. Thanks..

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

回答by vanderwyst

There is a grid feature to accomplish exactly that. It is covered herein the docs with some examples of how to use it.

有一个网格功能可以实现这一点。它覆盖在这里与如何使用它的一些实例文档。

You can also customize the style by providing your own implementation of the x-grid-row-summaryclass in your css.

您还可以通过x-grid-row-summary在 css 中提供您自己的类实现来自定义样式。

EDIT

编辑

Here's some examples of setting the summary row style, as you can see there are a few ways to go about it. Realize that the summary row can't be referenced until the viewreadyevent occurs, it is not ready at the afterrenderevent, so I put all this logic in a viewreadylistener:

下面是设置摘要行样式的一些示例，您可以看到有几种方法可以解决此问题。意识到在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);
            });
        }
    }
});

回答by Muzaffer GALATA

if we have summary row (like this), simply we can use CSS on specific page.

如果我们有摘要行（像这样），我们就可以在特定页面上使用 CSS。

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