更改extjs中网格摘要行的颜色

Posted 2023-02-26

【中文标题】更改extjs中网格摘要行的颜色

【英文标题】：Change the color of summary row of grid in extjs

【发布时间】：2013-06-18 12:01:10

【问题描述】：

我想更改网格摘要行的字体和背景颜色。我尝试将摘要行设置为：

var summaryRow = grid.view.el.down('tr.x-grid-row-summary');

基于 summaryRow 我可以设置样式。但我将 summaryRow 的值设为 null。有人可以指点我正确的方向还是我遗漏了什么？任何帮助表示赞赏。谢谢

【问题讨论】：

尝试 grid.down('Ext.grid.feature.Summary') 或 grid.down('feature.Summary')。摘要不是一个小部件，而是一个特性，因此我不确定它的 xtype 查询。

仍然是 null

grid.getView().getFeature(0) 怎么样

现在可以正常使用了。谢谢！！这是代码： var summaryRow = grid.getView().getFeature(0); summaryRow.view.el.setStyle(aStyleObject);

【参考方案1】：

记录在案的方法是摘要渲染器，摘要渲染器的最佳方法是 tdCls 或 tdAttr 属性：

                    text: 'Allocation %',
                    xtype: 'numbercolumn',
                    format: '00.00%',
                    dataIndex: 'allocationAmount',
                    summaryType: 'sum',
                    summaryRenderer: function (value, summaryData, dataIndex, rowIndex, colIndex, store, view) 

                        if (value > 100)
                        
                            summaryData.tdCls = 'text-warning-high'
                         else if (value === 100)
                        
                            summaryData.tdCls = 'text-successful';
                         else 
                            summaryData.tdCls = 'text-warning-low';
                        
                        return Ext.String.format('Total: 0%', value);
                    ,

你也可以像这样使用 tdAttr 版本：

 summaryRenderer: function (value, summaryData, dataIndex, rowIndex, colIndex, store, view) 
                        if (value > 100)
                        
                            summaryData.tdAttr = 'style="color: #ff0000"';
                         else if (value === 100)
                        
                            summaryData.tdAttr = 'style="color: green;"';
                         else 
                            summaryData.tdAttr = 'style="color: yellow;"';
                        
                        return Ext.String.format('Total: 0%', value);
                    ,

注意第一个将使用 css 类，因此您需要在 css 文件中定义适当的 css 类：D

【讨论】：

亲爱的@Jake 我已经实现了这个调整，但不知何故它没有着色！为什么会这样？

这里是列的代码sn-p； xtype: 'currdebitcol', text: translations.dAmount, summaryType: 'sum', summaryRenderer: function (value, summaryData, dataIndex, rowIndex, colIndex, store, view) if (value > 100) summaryData.tdAttr = 'style="color: red;"'; else if (value === 100) summaryData.tdAttr = 'style="color: green;"'; else summaryData.tdAttr = 'style="color: yellow;"'; return Ext.String.format('0', value); ,

【参考方案2】：

var summaryRow = grid.getView().getFeature(0); 
styleObj = 
     'background-color': '#c5c5c5'  
 ;
summaryRow.view.el.setStyle(styleObj);

【参考方案3】：

您可以使用网格列中的 summaryRenderer 函数以特定样式显示行。

Ext.create('Ext.grid.Panel', 
    width: 200,
    height: 140,
    renderTo: document.body,
    features: [
        ftype: 'summary'
    ],
    store: 
        model: 'TestResult',
        data: [
            student: 'Student 1',
            mark: 84
        ,
            student: 'Student 2',
            mark: 72
        ,
            student: 'Student 3',
            mark: 96
        ,
            student: 'Student 4',
            mark: 68
        ]
    ,
    columns: [
        dataIndex: 'student',
        text: 'Name',
        summaryType: 'count',
        summaryRenderer: function(value, summaryData, dataIndex) 
            return "<font color='red'>"+value+"<font>"; 
        
    , 
        dataIndex: 'mark',
        text: 'Mark',
        summaryType: 'average'
    ]
);

【参考方案4】：

或者我们可以在特定页面中使用 CSS。

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