1. #1
    Sencha Premium Member
    Join Date
    Jan 2008
    Posts
    112
    Vote Rating
    22
    KajaSheen will become famous soon enough KajaSheen will become famous soon enough

      2  

    Default Ext.ux.grid.feature.RemoteSummary

    Ext.ux.grid.feature.RemoteSummary


    Add the possibility to have a remote summary supplied with a server response, when you have a grid with lots of rows (and paging), but want to display a summary over all rows, i.e. account balance. Basically merged the functionality provided by the GroupingSummary into the regular Summary.

    PHP Code:
    Ext.define('Ext.ux.grid.feature.RemoteSummary', {
        
        
    /* Begin Definitions */
        
        
    extend'Ext.grid.feature.Summary',
        
        
    alias'feature.ux.remotesummary',
        
        
    /* End Definitions */
            
        /**
         * Generates all of the summary data to be used when processing the template
         * @private
         * @return {Object} The summary data
         */
        
    generateSummaryData: function(){
            var 
    me this,
                
    data = {},
                
    remoteData = {},
                
    store me.view.store,
                
    reader store.proxy.reader,
                
    columns me.view.headerCt.getColumnsForTpl(),
                
    root,
                
    summaryRow,
                
    remote,
                
    0,
                
    length columns.length,
                
    fieldData,
                
    key,
                
    comp;
                
            
    /**
             * @cfg {String} [remoteRoot=undefined]
             * The name of the property which contains the Array of summary objects.
             * It allows to use server-side calculated summaries.
             */
            
    if (me.remoteRoot && reader.rawData) {
                
    // reset reader root and rebuild extractors to extract summaries data
                
    root reader.root;
                
    reader.root me.remoteRoot;
                
    reader.buildExtractors(true);
                
    summaryRow reader.getRoot(reader.rawData);

                
    // Ensure the Reader has a data conversion function to convert a raw data row into a Record data hash
                
    if (!reader.convertRecordData) {
                    
    reader.buildExtractors();
                }

                
    // Convert a raw data row into a Record's hash object using the Reader
                
    reader.convertRecordData(remoteDatasummaryRow);

                
    // restore initial reader configuration
                
    reader.root root;
                
    reader.buildExtractors(true);
            }        
            
            for (
    0length columns.lengthlength; ++i) {
                
    comp Ext.getCmp(columns[i].id);
                
    data[comp.id] = me.getSummary(storecomp.summaryTypecomp.dataIndexfalse);
                
                
    remote remoteData[comp.dataIndex];
                if (
    remote !== undefined) {
                    
    data[comp.id] = remote;
                }                               
            }
            return 
    data;
        }
    }); 
    Example:
    PHP Code:
    // in your grid
    features: [{
      
    id'group',
      
    ftype'ux.remotesummary',
      
    hideGroupedHeadertrue,
      
    remoteRoot'summaryData'
      
    enableGroupingMenufalse
    }] 
    In the Response (in this case JSON)
    PHP Code:
    {
      
    successtrue,
      
    rows: [
        {
    id1description'foo'value100},
        {
    id2description'bar'value150}
      ],
      
    summaryData: {value500}

    would display the value of 500 collected from the server.

    Hope this is helpful for someone else

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Thank you for sharing your code ..

    Regards,
    Scott.

  3. #3
    Sencha Premium Member ajaxvador's Avatar
    Join Date
    Nov 2007
    Location
    PARIS, FRANCE
    Posts
    206
    Vote Rating
    0
    ajaxvador is on a distinguished road

      0  

    Default


    +1
    Vador

  4. #4
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Montréal, Canada
    Posts
    221
    Vote Rating
    5
    Christiand is on a distinguished road

      0  

    Default


    +1

    with the push to using buffered render grid/store since 4.0 there is no reason that this is not supported by the framework.

  5. #5
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Montréal, Canada
    Posts
    221
    Vote Rating
    5
    Christiand is on a distinguished road

      0  

    Default


    If I configure my buffered store with 100 records per page and the result from the server query return less then 100 records, then the summary is always displayed perfectly when I scroll to the bottom. If there are more then 100 records (and the store fetches more then once) then the summary doesn't appear as you scroll to the bottom. If I inspect the DOM with firebug, I see the HTML is generated properly and it highlights "under" the last visible row.

    gsbug.jpg

    So the problem appears to be the scroller that just stop one row before the summary (?) Anyone can help me fix this problem ?

  6. #6
    Sencha Premium Member
    Join Date
    Jan 2008
    Posts
    112
    Vote Rating
    22
    KajaSheen will become famous soon enough KajaSheen will become famous soon enough

      0  

    Default


    Hey Christiand,

    just saw your question. I reads like you are using a buffered store. The problem might be that the scroll bar is adjusted to the number of rows. A possible simple solution that comes to my mind would be to return the total number of rows + 1, that way the scroller should be able so show the summary.

    Even though this seems hacky, I would give it a try.

  7. #7
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Montréal, Canada
    Posts
    221
    Vote Rating
    5
    Christiand is on a distinguished road

      0  

    Default


    it's been a while and I don't remember all the details but I did find a solution to my problem. Cheating with return result didnt work somehow because at some point there is a validation with the record index (guaranteeRange() ?)

    Anyway, I did an override on the onViewScroll method from the the PagingScroller and added a check there.

Thread Participants: 3

Tags for this Thread