1. #1
    Ext User
    Join Date
    Sep 2008
    Posts
    5
    Vote Rating
    0
    SnigRO is on a distinguished road

      0  

    Default DataGrid Group Summary Problem? Help

    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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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
    SnigRO is on a distinguished road

      0  

    Default


    ok. thank yo.. it worked

  4. #4
    Ext User
    Join Date
    Mar 2009
    Posts
    3
    Vote Rating
    0
    fehabe is on a distinguished road

      0  

    Default Help with you Excell Export

    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
    mnemonic is on a distinguished road

      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
    667
    Vote Rating
    18
    carol.ext will become famous soon enough carol.ext will become famous soon enough

      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".

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar