是否可以在 extjs 的网格面板中显示多个摘要行？

Posted 2023-02-26

【中文标题】是否可以在 extjs 的网格面板中显示多个摘要行？

【英文标题】：Is it possible to show more than one summary row in gridpanel of extjs?

【发布时间】：2012-10-17 09:18:09

【问题描述】：

以下是我的代码，用于显示带有总成本摘要的网格面板。我想显示另一个带有平均值的摘要行。那么有什么帮助吗？

    Ext.require(['Ext.data.*', 'Ext.grid.*']);

    Ext.onReady(function() 

    Ext.define('NewEstimate', 
        extend: 'Ext.data.Model',
        fields: ['description', 'cost'],
        validations: [
            type: 'length',
            field: 'description',
            min: 3
        , 
            type: 'int',
            field: 'cost',
            min: 1
        ]
    );

    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');

    var store = Ext.create('Ext.data.Store', 
            autoLoad: true,
            autoSync: false,
            model: 'NewEstimate',
            proxy: 
                type: 'rest',
                url: 'app.php/users',
                reader: 
                    type: 'json',
                    root: 'data'
                ,
                writer: 
                    type: 'json'
                
            ,
            listeners: 
                write: function(store, operation)
                    var record = operation.records[0],
                        name = Ext.String.capitalize(operation.action),
                        verb;

                    if (name == 'Destroy') 
                        verb = 'Destroyed';
                     else 
                        verb = name + 'd';
                        alert(name);
                    
                    Ext.example.msg(name, Ext.String.format("0 user: 1", verb, record.getId()));

                
            
        );

    var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', 
            clicksToEdit: 1,
            listeners: 
                edit: function()
                    grid.getView().refresh();
                
            
        );

    var data = [
        projectId: 100, taskId: 112, description: 'Integrate 2.0 Forms with 2.0 Layouts', cost: 150,
        projectId: 100, taskId: 113, description: 'Implement AnchorLayout', cost: 150,
        projectId: 100, taskId: 114, description: 'Add support for multiple types of anchors', cost: 150,
        projectId: 100, taskId: 115, description: 'Testing and debugging', cost: 0
    ];

    var gridPanel = new Ext.create('Ext.grid.Panel', 
        width: 600,
        height: Ext.getBody().getViewSize().height * 0.3,
        renderTo: document.body,
        plugins: [rowEditing],
        features: [
            ftype: 'summary'
        
        ],
        store: store,
        columns: [
            dataIndex: 'description',
            flex: 1,
            text: 'Description',
            summaryType: 'count',
            field: 
                    xtype: 'textfield',
                    allowBlank: false
                ,
            summaryRenderer: function(value)
                return Ext.util.Format.leftPad('Estimate Total (EUR)');
               
        , 
            dataIndex: 'cost',
            width: 75,
            text: 'Line Total',

             field: 
                    xtype: 'numberfield',
                    allowBlank: false
                ,
            summaryType: function(records)
                    var i = 0,
                        length = records.length,
                        total = 0,
                        record;

                    for (; i < length; ++i) 
                        record = records[i];
                        total = total + Number(record.get('cost'));
                    
                    return total;
                
        ],
        dockedItems: [
               
             xtype: 'toolbar',
                items: [
                    text: 'Add',
                    iconCls: 'icon-add',
                    handler: function()
                        // empty record
                        store.insert(0, new NewEstimate());
                        rowEditing.startEdit(0, 0);
                    
                 , '-', 
                
                    text: 'Delete',
                    iconCls: 'icon-delete',
                    handler: function()

                        var selection = gridPanel.getView().getSelectionModel().getSelection()[0];

                        if (selection) 
                            store.remove(selection);
                        
                    
                ]
            ]
    );
    );

提前致谢

【参考方案1】：

我也有类似的需求。如果有足够的时间，我可能会扩展摘要功能以支持多个聚合。但是，我没有时间，所以我做了一些肮脏的工作。

我没有尝试获取两行，而是使用 summaryType 作为函数，并将值作为带有 BR 标记的字符串返回。这绝对是笨重的，但它可以满足我的需要。

类似：

columns: [
   
      header:'Quantity',
      dataIndex: 'Quantity',
      summaryType"="function( records ) 
         sum = 0;
         for( rec in records ) 
            var record = records[ rec ];
            sum += record.data[ '#guide#_Quantity' ];
         
         avg= Math.floor( sum/records.length );
         return '<strong>'+ sum + ' Books<br />' + avg + ' Books</strong>';
      
   
]