Ext js summaryRenderer函数没有调用

Question

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

Answer 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
    }
],