2013-11-20 97 views
0
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 hereExt JS的summaryRenderer功能沒有要求

回答

0

取消註釋'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 
    } 
],