Results 1 to 6 of 6

Thread: DataGrid Group Summary Problem? Help

  1. #1
    Ext User
    Join Date
    Sep 2008
    Posts
    5
    Vote Rating
    0
      0  

    Default DataGrid Group Summary Problem? Help

    Hi,
    I am trying to implement group summary ability yo my datagrid. I reference this example :
    http://www.extjs.com/deploy/dev/examples/grid/totals.html
    However, I did not do it.
    What's wring with my code? Can u take a look?
    Thanks

    Here is my page code :
    Code:
    <%@ page contentType="text/html;charset=iso-8859-9"%>
    <link rel="stylesheet" type="text/css"
     href="/collectioncommon/finansalIhtiyaclar/resources/extjs/resources/css/ext-all.css">
    <html>
    <head></head>
    <body>
    <script type="text/javascript"
     src="/collectioncommon/finansalIhtiyaclar/resources/extjs/ext-base.js"></script>
    <script type="text/javascript"
     src="/collectioncommon/finansalIhtiyaclar/resources/extjs/ext-all-debug.js"></script>
    <script type="text/javascript"
     src="/collectioncommon/finansalIhtiyaclar/resources/extjsexcelexport.js"></script> 
     
    <script type="text/javascript"
     src="/collectioncommon/finansalIhtiyaclar/resources/GroupSummary.js"></script> 
     
    <script type="text/javascript">
     
    Ext.onReady(function() {
     Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
     
     Ext.util.Format.CurrencyFactory = function(c, d, t) {
      return function(n) {
      var m = (c = Math.abs(c) + 1 ? c : 2, d = d || ",", t = t || ".",
      /(\d+)(?:(\.\d+)|)/.exec(n + "")), x = m[1].length > 3 ? m[1].length % 3 : 0;
      return ((x ? m[1].substr(0, x) + t : "") + m[1].substr(x).replace(/(\d{3})(?=\d)/g,
      "$1" + t) + (c ? d + (+m[2] || 0).toFixed(c).substr(2) : ""));
      }
     }
     
     var xg = Ext.grid;
     var page_limit = 30;
        //alert("Congratulations!  You have Ext configured correctly1!");
         var myRecord = new Ext.data.Record.create([
            {name:'campaignCode', type: 'string'}, 
            {name:'campaignName', type: 'string'}, 
            {name:'nsum01_10', type: 'float'}, 
            {name:'nsum10_20', type: 'float'},
            {name:'nsum20_30', type: 'float'}, 
            {name:'nsum', type: 'float'}, 
            {name:'distributorName', type: 'string'},
            {name:'term', type: 'string'}
        ]);
     
         //alert("Congratulations!  You have Ext configured correctly11!");
     
        var myJsonReader = new Ext.data.JsonReader({   // we tell the datastore where to get his data from
            root: 'jsonRoot',
            //totalProperty: 'nsum01_10',
            id: 'campaignCode', 
            remoteLoad : true
        }, myRecord)
     
        //alert("Congratulations!  You have Ext configured correctly12!");
     
        var myProxy = new Ext.data.HttpProxy({
            url: '/collectioncommon/kfiInvoicePrepaidForm.do?action=getPrepiadInvoices',      // File to connect to
            method: 'POST'
        })
     
     
     //alert("Congratulations!  You have Ext configured correctly13!");
     
     
        var myColumnModel = new Ext.grid.ColumnModel([
          new xg.RowNumberer(),
            {header: "Campaign Code", width: 30, sortable: true, dataIndex: 'campaignCode'},
             {header: "Campaign Name", width: 100, sortable: true, dataIndex: 'campaignName'},
             {header: "01-10",   width: 25, sortable: true, align: 'right', renderer: Ext.util.Format.CurrencyFactory(2, ".", ","), summaryType:'sum', dataIndex: 'nsum01_10'},
             {header: "10-20",   width: 25, sortable: true, align: 'right', renderer: Ext.util.Format.CurrencyFactory(2, ".", ","), summaryType:'sum', dataIndex: 'nsum10_20'},
             {header: "20-30",   width: 25, sortable: true, align: 'right', renderer: Ext.util.Format.CurrencyFactory(2, ".", ","), summaryType:'sum',dataIndex: 'nsum20_30'},
             {header: "Sum",  width: 28, sortable: true, align: 'right', renderer: Ext.util.Format.CurrencyFactory(2, ".", ","), summaryType:'sum', dataIndex: 'nsum'},
             {header: "Dist",  width: 30, sortable: true, dataIndex: 'distributorName'},
             {header: "Term ",  width: 30, sortable: true, dataIndex: 'term'},
     
        ]);   
     
     
        var myJsonStore = new Ext.data.JsonStore({
            id: 'id',
            proxy: myProxy,
            reader: myJsonReader
        });    
     
        var myGroupingStore = new Ext.data.GroupingStore({
                //id: 'id',
                autoLoad: true,
                proxy: myProxy,
                //baseParams:{task: "LISTING"}, // this parameter asks for listing
                //root:'data',
                reader: myJsonReader,
                store: myJsonStore,
                //sortInfo: {field: 'campaignCode', direction: 'ASC'},
                groupField:'term'
            });
     
     
        var grid = new xg.EditorGridPanel({
            // A groupingStore is required for a GroupingView
            id: 'static-grid',
            store: myGroupingStore,
            enableColLock: false,
            loadMask: true,
     
            //cm:myColumnModel,
     
            columns: [
             new xg.RowNumberer(),
            {id:'id', header: "Campaign Code", width: 30, sortable: true, dataIndex: 'campaignCode'},
             {header: "Campaign Name", width: 100, sortable: true, summaryType:'count', dataIndex: 'campaignName'},
             {header: "01-10",   width: 25, sortable: true, align: 'right', summaryType:'sum', renderer: Ext.util.Format.CurrencyFactory(2, ".", ","), dataIndex: 'nsum01_10'},
             {header: "10-20",   width: 25, sortable: true, align: 'right', renderer: Ext.util.Format.CurrencyFactory(2, ".", ","), summaryType:'sum', dataIndex: 'nsum10_20'},
             {header: "20-30",   width: 25, sortable: true, align: 'right', renderer: Ext.util.Format.CurrencyFactory(2, ".", ","), summaryType:'sum',dataIndex: 'nsum20_30'},
             {header: "Sum",  width: 28, sortable: true, align: 'right', 
              renderer: Ext.util.Format.CurrencyFactory(2, ".", ","), summaryType:'sum', dataIndex: 'nsum'},
             {header: "Dist",  width: 30, sortable: true, dataIndex: 'distributorName'},
             {header: "Term ",  width: 30, sortable: true, dataIndex: 'term'}
            ],
     
            view: new Ext.grid.GroupingView({
                forceFit:true,
                //groupByText: 'Bu kolonu grupla',
                groupTextTpl: '{text}  -  ({[values.rs.length]} {[values.rs.length > 1 ? " Campaign" : " Campaign"]})',
                showGroupName: false,
                enableNoGroups: false, // REQUIRED!
                hideGroupedColumn: true
            }),
            width: 900,
            height: 600,
            //collapsible: true,
            //animCollapse: true,
            title:'Test',
            iconCls: 'icon-grid',
            stripeRows: true,
            renderTo: 'content',
            frame:true,
            trackMouseOver: false,
     
     
            clicksToEdit: 1,
            collapsible: true,
            animCollapse: false,
     
     
            /*
            bbar: new Ext.PagingToolbar({
                store: myJsonStore,
                pageSize: page_limit
            }),
            */
            bbar: new Ext.Toolbar({
              buttons: [{
            id: 'grid-excel-button',
            text: 'Excel',
         handler: function(){
          document.location='data:application/vnd.ms-excel;base64,' + Base64.encode(grid.getExcelXml());
         }
           }]
      })
        });
    });
    </script>
    <br><br>
    <table>
     <tr>
      <td width="50px"></td>
      <td>
      <div id="content"></div>
      <br>
      <br>
      <br>
      </td>
     </tr>
    </table>
    </body>
    </html>
    Here the GroupSummary.js file. I found it also from this forum.

    Code:
    /*
     * Ext JS Library 2.2
     * Copyright(c) 2006-2008, Ext JS, LLC.
     * licensing@extjs.com
     * 
     * http://extjs.com/license
     */
    Ext.grid.GroupSummary = function(config){
        Ext.apply(this, config);
    };
    Ext.extend(Ext.grid.GroupSummary, Ext.util.Observable, {
        init : function(grid){
            this.grid = grid;
            this.cm = grid.getColumnModel();
            this.view = grid.getView();
            var v = this.view;
            v.doGroupEnd = this.doGroupEnd.createDelegate(this);
            v.afterMethod('onColumnWidthUpdated', this.doWidth, this);
            v.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);
            v.afterMethod('onColumnHiddenUpdated', this.doHidden, this);
            v.afterMethod('onUpdate', this.doUpdate, this);
            v.afterMethod('onRemove', this.doRemove, this);
            if(!this.rowTpl){
                this.rowTpl = new Ext.Template(
                    '<div class="x-grid3-summary-row" style="{tstyle}">',
                    '<table class="x-grid3-summary-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
                        '<tbody><tr>{cells}</tr></tbody>',
                    '</table></div>'
                );
                this.rowTpl.disableFormats = true;
            }
            this.rowTpl.compile();
            if(!this.cellTpl){
                this.cellTpl = new Ext.Template(
                    '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}">',
                    '<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on">{value}</div>',
                    "</td>"
                );
                this.cellTpl.disableFormats = true;
            }
            this.cellTpl.compile();
        },
        toggleSummaries : function(visible){
            var el = this.grid.getGridEl();
            if(el){
                if(visible === undefined){
                    visible = el.hasClass('x-grid-hide-summary');
                }
                el[visible ? 'removeClass' : 'addClass']('x-grid-hide-summary');
            }
        },
        renderSummary : function(o, cs){
            cs = cs || this.view.getColumnData();
            var cfg = this.cm.config;
            var buf = [], c, p = {}, cf, last = cs.length-1;
            for(var i = 0, len = cs.length; i < len; i++){
                c = cs[i];
                cf = cfg[i];
                p.id = c.id;
                p.style = c.style;
                p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
                if(cf.summaryType || cf.summaryRenderer){
                    p.value = (cf.summaryRenderer || c.renderer)(o.data[c.name], p, o);
                }else{
                    p.value = '';
                }
                if(p.value == undefined || p.value === "") p.value = " ";
                buf[buf.length] = this.cellTpl.apply(p);
            }
            return this.rowTpl.apply({
                tstyle: 'width:'+this.view.getTotalWidth()+';',
                cells: buf.join('')
            });
        },
        calculate : function(rs, cs){
            var data = {}, r, c, cfg = this.cm.config, cf;
            for(var j = 0, jlen = rs.length; j < jlen; j++){
                r = rs[j];
                for(var i = 0, len = cs.length; i < len; i++){
                    c = cs[i];
                    cf = cfg[i];
                    if(cf.summaryType){
                        data[c.name] = Ext.grid.GroupSummary.Calculations[cf.summaryType](data[c.name] || 0, r, c.name, data);
                    }
                }
            }
            return data;
        },
        doGroupEnd : function(buf, g, cs, ds, colCount){
            var data = this.calculate(g.rs, cs);
            buf.push('</div>', this.renderSummary({data: data}, cs), '</div>');
        },
        doWidth : function(col, w, tw){
            var gs = this.view.getGroups(), s;
            for(var i = 0, len = gs.length; i < len; i++){
                s = gs[i].childNodes[2];
                s.style.width = tw;
                s.firstChild.style.width = tw;
                s.firstChild.rows[0].childNodes[col].style.width = w;
            }
        },
        doAllWidths : function(ws, tw){
            var gs = this.view.getGroups(), s, cells, wlen = ws.length;
            for(var i = 0, len = gs.length; i < len; i++){
                s = gs[i].childNodes[2];
                s.style.width = tw;
                s.firstChild.style.width = tw;
                cells = s.firstChild.rows[0].childNodes;
                for(var j = 0; j < wlen; j++){
                    cells[j].style.width = ws[j];
                }
            }
        },
        doHidden : function(col, hidden, tw){
            var gs = this.view.getGroups(), s, display = hidden ? 'none' : '';
            for(var i = 0, len = gs.length; i < len; i++){
                s = gs[i].childNodes[2];
                s.style.width = tw;
                s.firstChild.style.width = tw;
                s.firstChild.rows[0].childNodes[col].style.display = display;
            }
        },
        // Note: requires that all (or the first) record in the 
        // group share the same group value. Returns false if the group
        // could not be found.
        refreshSummary : function(groupValue){
            return this.refreshSummaryById(this.view.getGroupId(groupValue));
        },
        getSummaryNode : function(gid){
            var g = Ext.fly(gid, '_gsummary');
            if(g){
                return g.down('.x-grid3-summary-row', true);
            }
            return null;
        },
        refreshSummaryById : function(gid){
            var g = document.getElementById(gid);
            if(!g){
                return false;
            }
            var rs = [];
            this.grid.store.each(function(r){
                if(r._groupId == gid){
                    rs[rs.length] = r;
                }
            });
            var cs = this.view.getColumnData();
            var data = this.calculate(rs, cs);
            var markup = this.renderSummary({data: data}, cs);
            var existing = this.getSummaryNode(gid);
            if(existing){
                g.removeChild(existing);
            }
            Ext.DomHelper.append(g, markup);
            return true;
        },
        doUpdate : function(ds, record){
            this.refreshSummaryById(record._groupId);
        },
        doRemove : function(ds, record, index, isUpdate){
            if(!isUpdate){
                this.refreshSummaryById(record._groupId);
            }
        },
        showSummaryMsg : function(groupValue, msg){
            var gid = this.view.getGroupId(groupValue);
            var node = this.getSummaryNode(gid);
            if(node){
                node.innerHTML = '<div class="x-grid3-summary-msg">' + msg + '</div>';
            }
        }
    });
    Ext.grid.GroupSummary.Calculations = {
        'sum' : function(v, record, field){
            return v + (record.data[field]||0);
        },
        'count' : function(v, record, field, data){
            return data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
        },
        'max' : function(v, record, field, data){
            var v = record.data[field];
            var max = data[field+'max'] === undefined ? (data[field+'max'] = v) : data[field+'max'];
            return v > max ? (data[field+'max'] = v) : max;
        },
        'min' : function(v, record, field, data){
            var v = record.data[field];
            var min = data[field+'min'] === undefined ? (data[field+'min'] = v) : data[field+'min'];
            return v < min ? (data[field+'min'] = v) : min;
        },
        'average' : function(v, record, field, data){
            var c = data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
            var t = (data[field+'total'] = ((data[field+'total']||0) + (record.data[field]||0)));
            return t === 0 ? 0 : t / c;
        }
    }
    Ext.grid.HybridSummary = Ext.extend(Ext.grid.GroupSummary, {
        calculate : function(rs, cs){
            var gcol = this.view.getGroupField();
            var gvalue = rs[0].data[gcol];
            var gdata = this.getSummaryData(gvalue);
            return gdata || Ext.grid.HybridSummary.superclass.calculate.call(this, rs, cs);
        },
        updateSummaryData : function(groupValue, data, skipRefresh){
            var json = this.grid.store.reader.jsonData;
            if(!json.summaryData){
                json.summaryData = {};
            }
            json.summaryData[groupValue] = data;
            if(!skipRefresh){
                this.refreshSummary(groupValue);
            }
        },
        getSummaryData : function(groupValue){
            var json = this.grid.store.reader.jsonData;
            if(json && json.summaryData){
                return json.summaryData[groupValue];
            }
            return null;
        }
    });

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    118
      0  

    Default

    1. GroupSummary.js can also be found in the Ext JS SDK (in examples/grid/GroupSummary.js).
    2. You never create the a GroupSummary instance and use it as a grid plugin (please reexamine the group summary example).

  3. #3
    Ext User
    Join Date
    Sep 2008
    Posts
    5
    Vote Rating
    0
      0  

    Default

    ok. thank yo.. it worked

  4. #4
    Ext User
    Join Date
    Mar 2009
    Posts
    3
    Vote Rating
    0
      0  

    Default Help with you Excell Export

    SnigRO Could you please show your code for


    Code:
    <script type="text/javascript"
     src="/collectioncommon/finansalIhtiyaclar/resources/extjsexcelexport.js"></script>
    I guess this works for then line showed in this thread
    Code:
    ...
    bbar: new Ext.Toolbar({
              buttons: [{
            id: 'grid-excel-button',
            text: 'Excel',
         handler: function(){
          document.location='data:application/vnd.ms-excel;base64,' + Base64.encode(grid.getExcelXml());
         }
    ...
    thank you

  5. #5
    Ext User
    Join Date
    Feb 2009
    Posts
    4
    Vote Rating
    0
      0  

    Default

    can we get summary total without group?

  6. #6
    Sencha User carol.ext's Avatar
    Join Date
    Jun 2007
    Location
    Littleton, Colorado, USA
    Posts
    708
    Vote Rating
    36
      0  

    Default

    Quote Originally Posted by mnemonic View Post
    can we get summary total without group?
    Check the grid FAQ for "Grid Summary Plugin With Fixed Summary Row".

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •