Grid Summary Plugin With Fixed Summary Row

[Rainher]

Hi all,
first of all, congratulations on this wonderful plug-in.
My only problem is that, on initial load of the data, the total isn't refreshed and stays at 0.
Furthermore, when editing an already populated grid (ie. starting values not at 0), the total starts counting from the new value.
What am I missing?
Many thanks in advance!

<?php
$this->load->helper('form');
?>
<div id="subtitle">
<h2>Area impresa - Modulo 1</h2>
<h3>B. Pesatura FCA</h3>
	<div id="infoint">
		Intervista: <?= $id; ?><br>
    	Azienda: <?= $DENOMINAZIONE_AZ; ?><br>
		Tutor: <?= $tutor; ?>
	</div>
</div>
<div>
	<?=form_open('hitex/unofca/'.$id); ?>
	<div class="destra"><input type="image" src="<?= base_url(); ?>img/avanti.gif" alt="Prosegui" onclick="return checkAndSend();"></div>
	<input type="hidden" name="serval" id="serval" value="">
	<?=form_close(); ?>
</div>
<div style="text-align: left;">
	<div id="grid"></div>
</div>
<script>
<!--
	var grid;
	var summary;
	Ext.BLANK_IMAGE_URL = '<?= base_url() ?>ext/resources/images/default/s.gif';
	Ext.onReady(function(){

function totPesi(v, params, data)
{
	return 'Totale: '+ v;
}

var ds = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({
        url: '<?= base_url() ?>index.php/ajax/unofca/<?= $id; ?>',
		method: 'post'
    }),
    reader: new Ext.data.JsonReader({
        root: 'dati',
		totalProperty: 'totale',
        id: 'id'
    }, [
        {name: 'nome', mapping: 'nome'},
        {name: 'categoria', mapping: 'categoria'},
		{name: 'peso', mapping: 'peso'}
    ])
});
var cm = new Ext.grid.ColumnModel([
		{
           header: "Nome",
           dataIndex: 'nome',
           width: 220
        },
		{
           header: "Categoria",
           dataIndex: 'categoria',
           width: 220
        },
		{
           header: "Peso",
           dataIndex: 'peso',
           width: 70,
           align: 'center',
		   summaryType: 'sum',
		   summaryRenderer: totPesi,
           editor: new Ext.form.NumberField({
               allowBlank: false,
               allowNegative: false,
			   allowDecimals: false,
               maxValue: 100
           })
        }
	]);

summary = new Ext.ux.grid.GridSummary();

grid = new Ext.grid.EditorGridPanel({
        store: ds,
        cm: cm,
        renderTo: 'grid',
        width:600,
        height:320,
        title:'Pesi degli FCA',
        frame:false,
        clicksToEdit:1,
		stripeRows: true,
		plugins: [summary]
    });
  
ds.load();
});

function checkAndSend()
{
	var serie = "";
	var pesotot = 0;
	righe = grid.store.getRange();
	
	for (i = 0; i < righe.length; i++) {
		riga = righe[i];
		
		if (riga.data.peso < 1) {
			Ext.Msg.alert('Errore', 'Ciascun FCA deve avere un peso maggiore di 0');
			return false;
		}

		serie += riga.id + '|' + riga.data.peso + '#';
		pesotot += riga.data.peso;
	}

	if (pesotot == 100) {
		hid = document.getElementById('serval');
		hid.value = serie;
		//return true;
	} else {
		Ext.Msg.alert('Errore', 'La somma dei pesi deve essere pari a 100');
		return false;
	}
}
//-->
</script>

[americos]

Hi All,

The code works pretty nice, I have a question though... When you reconfigure the grid DS and columnModel with:

grid.reconfigure(dataStore, columnModel)

the summary does not update. Any clues how to accomplish this?

[mystix]

Hi All,

The code works pretty nice, I have a question though... When you reconfigure the grid DS and columnModel with:

the summary does not update. Any clues how to accomplish this?

comment out this line

this.cm = grid.getColumnModel();

and change all instances of this.cm.config to

this.grid.getColumnModel().config

and let me know how that works out for you.

[mystix]

@rainher, try the latest update and let me know how that works out for you.

(note: i only added listeners on the Store's add, remove and clear events 'cos i think those are uncaught by the GridView, but i could be wrong).

[thomasf]

First. Congratulations on this Extension. It is exactly what i needed! But I was wondering why this feature is not a core feature of the powerful Ext grid?


I had a problem in IE7 when i set the grid to height: 'auto' in the config. I got a Runtime Error on line 2746 (debug version of Ext).

My grid:

            var summary = new Ext.ux.grid.GridSummary();
            // create the grid
            var grid = new Ext.grid.GridPanel({
                store : store,
                cm : new Ext.grid.ColumnModel([
                new Ext.grid.RowNumberer(), {
                    header : this.hdrActivity,
                    width : 130,
                    dataIndex : 'activity',
                    sortable : true,
                    summaryType : 'count',
                    summaryRenderer : totalActivities
                }, {
                    header : this.hdrHours,
                    width : 80,
                    dataIndex : 'hours',
                    sortable : true,
                    summaryType : 'sum',
                    align:'right'
                }, {
                    header : this.hdrSum,
                    width : 80,
                    dataIndex : 'amount',
                    sortable : true,
                    renderer: moneyFormat,
                    align:'right',
                    summaryType : 'sum'
                }]),
                viewConfig : {
                    forceFit : true
                },
                renderTo : 'time-grid-activity',
                iconCls : 'icon-grid',
                plugins : summary,
                stripeRows : true,
                width : 350,
                height : 'auto',
                maxHeight : 500,
                autoHeight : true,
                collapsible : true,
                animCollapse : false,
                loadMask : true,
                footer : true,
                title : this.gridTitleActivity
            });

To get this working (Quick&Dirty ) i changed the onLayout Function in the Ext.ux.grid.GridSummary:

  onLayout : function(vw, vh) {
    if ('number' !== Ext.type(vh)) {
        return;
    }
    // note: this method is scoped to the GridView
    if (!this.grid.getGridEl().hasClass('x-grid-hide-gridsummary')) {
      // readjust gridview's height only if grid summary row is visible
      this.scroller.setHeight(vh - this.summary.getHeight());
    }
  },

Hope this helps.

[hongfu]

it really helps.
thanks.

[sayanb]

Hi All,

Are there any examples of the grid summary? Screenshots would be nice too.

Also my organisation just got a team license with Gold support, and we are basing an entire slew of applications on Ext.

What are the additional resource that we could get our hands on?

Thanks
sayanb

[mystix]

Hi All,

Are there any examples of the grid summary? Screenshots would be nice too.

they're all on the previous page - screenshots, and a zip containing the plugin code and a full drop-in example.

[sayanb]

My grid has a too many columns . The summary plugin is of no use if I can not horizontally scroll on the summary. Is there a work around ?

Any response would be appreciated.

[mystix]

My grid has a too many columns . The summary plugin is of no use if I can not horizontally scroll on the summary. Is there a work around ?

Any response would be appreciated.

i don't know which plugin u're using, but the one i posted scrolls horizontally (as shown in the screenshot).