Ext js summaryRenderer函数未调用

Posted 2023-02-26

【中文标题】Ext js summaryRenderer函数未调用

【英文标题】：Ext js summaryRenderer function not calling

【发布时间】：2013-11-20 11:18:11

【问题描述】：

This is my view
Ext.define('view.OrdersGrid', 
    extend: 'Ext.grid.Panel',
    alias: 'widget.ordersgrid',
    store: 'TicketOrders',
    features:[
        
            ftype: 'groupingsummary',
            groupHeaderTpl: [
            '[values.rows[0].data.EventName]&nbsp;&mdash;&nbsp;<small class="muted">[values.rows[0].data.EventDate]</small>',
            ],
            //hideGroupedHeader: true,
            //collapsible: false,
            remoteRoot: 'record',
            //showSummaryRow: true,
        
    ],

    initComponent: function () 
        var me = this;
        me.on('edit', function (editor, e) 
            me.getSelectionModel().select(e.record);
            me.fireEvent('onEdit', e.record);
        );
        me.selModel.on('select', function (t, record, index, eOpts) 

            me.fireEvent('onRecordSelected', record);
        );
        me.selModel.on('deselect', function (t, record, index, eOpts) 
            me.fireEvent('onRecordSelected', record);
        );

        me.columns =
        [
        
            id: 'order',
            text: "Order Id",
            sortable: true,
            dataIndex: 'TOId',
            hidden: true
        ,
        
            text: "Order Number",
            flex: 1.5,
            sortable: true,
            dataIndex: 'OrderNumber',
            renderer: function (value, metadata, record) 
                if (record.get('OrderStatus') == 3)  // error orders

                    return value + "  <img src='images/icons/icon_question_mark.gif' title='" + record.get('Description') +  "'/>";
                
                else 
                    return value;
                

            

        ,
        
            text: "Event",
            flex: 3,
            sortable: true,
            dataIndex: 'EventName',
            hidden: true,
            //summaryType: 'sum',
            renderer: function (value, metadata, record) 
                return value + "  ( " + record.get('TicketCount') + " )";
            

        ,
        
            text: "Price",
            flex: 1,
            sortable: true,
            dataIndex: 'TotalCharges',
            //summaryType: 'sum',
            //renderer: function (value, summaryData, dataIndex) 
            //    debugger;
            //    return parseInt(value);
           // 
            summaryRenderer: function (value, metadata, record) 
                debugger;
                return Ext.String.format(
                         "Total: 0",
                         Ext.Number.toFixed(value)
                 );

            

       
      ];

        this.callParent(arguments);

    , // end init function


    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', 
        )
    ], //end plugins

);

This is my model

Ext.define('model.TicketOrder', 
    extend: 'Ext.data.Model',
    fields: [
    'TOId',
    'OrderNumber',
    'EventName',
    'TicketCount',
      
          name: 'TotalCharges',
          type: 'int'

      

    ],
    idProperty: 'TOId',

    proxy: 
        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        type: 'ajax',
        disableCaching: true,
        url: 'WebService.asmx/GetTicketOrdersByUserId?userId=' + Utilities.UserId,
    reader: 
            root: 'orders',
            totalProperty: 'totalCount'
        ,
        // sends single sort as multi parameter
        simpleSortMode: true
    
);

This is my store
Ext.define('store.TicketOrders', 
    extend: 'Ext.data.Store',
    model: 'model.TicketOrder',
    autoLoad: false,
    remoteSort: false,
    pageSize: 50,
    groupField: 'EventOriginalId'


);

我正在使用 MVC 架构，我在 summaryRenderer 中放置了一个调试器，但它没有执行并且没有显示任何摘要行，请帮助。也告诉我remoteRoot应该设置什么..enter code here

【参考方案1】：

取消注释 'showSummaryRow: true" 你需要这个。然后对于你定义的每一列，你需要一个摘要，你需要定义 summaryRenderer: function() ... 和 SummaryType: 'sum'。EXTJS 可能是一个真正的痛苦，尤其是当你想做一些自定义的事情时。注意多余的逗号（看起来你在功能部分有几个）。尽量保持简单。祝你好运！

features:[
    
        ftype: 'groupingsummary',
        groupHeaderTpl: [
        '[values.rows[0].data.EventName]&nbsp;&mdash;&nbsp;<small class="muted">[values.rows[0].data.EventDate]</small>',
        ],
        //hideGroupedHeader: true,
        //collapsible: false,
        remoteRoot: 'record',
        showSummaryRow: true
    
],