extJs 4网格定制 - 总计行 [英] extJs 4 grid customization - Total row at the end

问题描述

我想要一个只有两列的网格，一个是名字，另一个是百分比。最后一行将具有总计作为名称，总百分比为百分比。该行的样式与其他行的风格不同。请指导我如何做到这一点。
谢谢..

解决方案

有一个网格功能来完成这一点。覆盖 此处 x->的实现来自定义样式，其中包含一些有关如何使用它的示例文档。

编辑

以下是设置摘要行样式的一些示例，您可以看到有几种方法可以解决。在 viewready 事件发生之前，意识到汇总行无法引用，但在 afterrender 事件尚未准备就绪，所以我把所有这些逻辑放在一个 viewready 监听器中：

  Ext .create（'Ext.grid.Panel'，{
功能：[{
 ftype：'summary'
}]，
 //其他网格配置... 
 listeners：{
 viewready：function（grid）{
 
 //获取对摘要行的引用
 var summaryRow = grid.view.el.down（'tr。 x-grid-row-summary'）; 
 
 //这将在行中应用一个css类，在这个例子中，
 //我将extjs的网格标题样式应用于我的摘要行
 summaryRow.addCls（'x-grid-header-ct'）; 
 
 //或者在javascript中做到这一点，就像您在评论中所提到的那样
 / /首先你会创建一个样式对象，我拿这些样式
 // prope来自.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'
} 
 //然后你使用setStyle 
 summaryRow.setStyle（aStyleObject）传递样式对象; 
 
 //或者您可以使用
 // addCls或setStyle单独设置每个单元格的样式：
 Ext.Array.each（summaryRow.query（'td'）， function（td）{
 var cell = Ext.get（td）; 
 cell.addCls（'some-class'）; 
 //或
 cell.setStyle（anotherStyleObject ）; 
}）; 
} 
} 
}）; 
  

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..

解决方案

There is a grid feature to accomplish exactly that. It is covered here in 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-summary class in your 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 viewready event occurs, it is not ready at the afterrender event, so I put all this logic in a viewready listener:

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 4网格定制 - 总计行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！