ExtJs GroupingView groupTextTpl Parameters

I have an Ext.grid.GroupingView in one of my ExtJs datagrids, and I’ve been wanting to change the way it displays some of the MySQL data. To be more specific, I’d like it to display other fields, besides the one being grouped by. The groupTextTpl option handles this, however, as most of the documentation on ExtJs, which is non-existent, it can be sometimes dauting to figure out how toget this accomplished.

It may have taken a while to find a way to make this work, but after a few hours searching on the net, here’s what some folks from the open source community have come up with and I’d like to share this with you, and hopefully save you some time looking for it.

This is what the code for your datagrid might look like before adding the groupview:

var mygrid = new Ext.grid.GridPanel  ({
    store: mydatastore,
    columns: [
            {header: 'Field 1', width:45, dataindex: 'mysql_field1'},
            {header: 'Field 2', width:55, dataindex: 'mysql_field2'},
            {header: 'Field 3', width:70, dataindex: 'mysql_field3'},
            {header: 'Field 4',  width:90, dataindex: 'mysql_field4'},
            {header: 'Field 5',  width:40, dataindex: 'mysql_field5'}
    ],
     stripeRows: true,
     autoSizeColumns: true,
     autoSizeGrid: true,
     title:'Your Grid Title',
     collapsible: false,
     animCollapse: false,
     height: 445,
     columnLines: true
});

So if you want to group by mysql_field1 and display mysql_field2, you just need to add the lines below:

view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text}|{[ values.rs[0].data["mysql_field2"] ]} ({[values.rs.length]} {[values.rs.length > 1 ? "Devices" : "Device"]})'
})

And your final grid would look like this:

var mygrid = new Ext.grid.GridPanel  ({
    store: mydatastore,
    columns: [
            {header: 'Field 1', width:45, dataindex: 'mysql_field1'},
            {header: 'Field 2', width:55, dataindex: 'mysql_field2'},
            {header: 'Field 3', width:70, dataindex: 'mysql_field3'},
            {header: 'Field 4',  width:90, dataindex: 'mysql_field4'},
            {header: 'Field 5',  width:40, dataindex: 'mysql_field5'}
    ],
     stripeRows: true,
     autoSizeColumns: true,
     autoSizeGrid: true,
     title:'Your Grid Title',
     collapsible: false,
     animCollapse: false,
     height: 445,
     columnLines: true,
     view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text}|{[ values.rs[0].data["mysql_field2"] ]} ({[values.rs.length]} {[values.rs.length > 1 ? "Devices" : "Device"]})'
})

});

For illustration purposes, here’s the datastore for the grid:

var mydatastore = new Ext.data.GroupingStore({
        reader: new Ext.data.JsonReader({
          fields : [
            {name: 'field1', type: 'int', mapping: 'mysql_field1'},
            {name: 'field2', type: 'string', mapping: 'mysql_field2'},
            {name: 'field3', type: 'string', mapping: 'mysql_field3'},
            {name: 'field4', type: 'string', mapping: 'mysql_field4'},
            {name: 'field5', type: 'string', mapping: 'mysql_field5'}
                    ],
          root: 'myInventory',
          totalProperty: 'myTotal'
        }),
  proxy: new Ext.data.HttpProxy({
            url: './data.php'
        }),
        sortInfo:{field: 'field5', direction: "ASC"},
        remoteSort: true,
        groupField:'field1'
 
    });

That’s it, as usual, just a few simple lines of code that will hopefully save you some time, and as always, thank you for stopping by and please share with others, after all, code should be free.

9 thoughts on “ExtJs GroupingView groupTextTpl Parameters

  1. Pingback: Tweets that mention New blog post: GroupingView group... #linux #extjs #ajax #code #opensource #php -- Topsy.com

  2. Pingback: Tweets that mention ExtJs #GroupingView groupTextTpl Parameters #linux #opensource #ajax -- Topsy.com

  3. Pingback: Connect extjs with mysql using php | foscode

  4. send me some complete examples, i already create several examples and mone of them whork, i only want to create a local website for my enterprise that connect several databases and software.

  5. @cfaria Please be more specific as to what exactly doesn’t work and maybe I can help you. Unfortunately I don’t how your application is designed and where the errors might be. If you want a complete working example, without having to design it yourself, please look at http://www.sencha.com, they have many working examples that you can just copy and modify to your liking. If you indeed want me to design an entire application for you, please send me a message and we can discuss pricing. The examples on my site are here to help others design their applications, not as a template, so they will require you to make necessary changes to them, and this examples also don’t take into account rather your application has been designed properly or not. Thanks for stopping by.

  6. Awesome example but could you please explain how to call a function. Lets say with Group Name wants to show the summary details besides this.

  7. Thanks for the awesome post on groupView text.
    I have a doubt on blank values/records for the grouping.
    In detail:
    I’ve a grid with 30 records with Name, Age, Gender and Email ID. Here Gender is optional field. I need group by all the available fields in the grid.
    How to show text header like Gender (n records) When i’m doing grouping on Gender (as this is optional field, there is no data for few records)

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>