19 December 2010 ~ 53 Comments

ExtJs GridPanel

In this post I will show how to make and customize a GridPanel in ExtJs.

In it’s simples form a gridpanel is just a fancy way of displaying tabular data. Like this example showing population in Norway:

Setting up a GridPanel with an ArrayStore

What you need to set up a basic GridPanel is the following two parts:

  • A store
  • A columnmodel

Setting up the ArrayStore

Any kind of Ext Store works. In this example we’ll use a simple ArrayStore containing data about population in Norway.

        var data = [
            ['Østfold',271662,2252,1960,292,7465,2148,5168,1053,2297,2589,274251],
			['Akershus',536499,4979,2758,2221,22494,6354,17572,3181,4922,7143,543642],
			['Oslo',586860,7795,3202,4593,34004,13434,28534,7453,5470,10063,596923],
			['Hedmark',190709,1362,1625,-263,4892,1413,3873,488,1019,756,191465],
			['Oppland',185216,1410,1489,-79,4895,1493,4110,488,785,706,185922],
			['Buskerud',257673,2194,1703,491,8238,2791,6185,941,2053,2544,260217],
			['Vestfold',231286,1846,1478,368,6719,2121,5175,951,1544,1912,233198],
			['Telemark',168231,1355,1228,127,3773,1252,3037,422,736,863,169094],
			['Aust-Agder',108499,1046,716,330,3267,965,2288,283,979,1309,109808],
			['Vest-Agder',170377,1687,1046,641,4658,1586,3655,517,1003,1644,172021],
			['Rogaland',427947,4954,2246,2708,11133,6235,7216,2152,3917,6625,434572],
			['Hordaland',477175,4847,2800,2047,11732,5232,7880,1506,3852,5899,483074],
			['Sogn og Fjordane',107080,937,698,239,2626,1196,2310,282,316,555,107635],
			['Møre og Romsdal',251262,2164,1659,505,6001,2907,4434,820,1567,2072,253334],
			['Sør-Trøndelag',290547,2997,1805,1192,9174,3013,7407,1542,1767,2959,293506],
			['Nord-Trøndelag',131555,1126,972,154,3071,852,2938,459,133,287,131842],
			['Nordland',236271,1934,1705,229,5262,1924,4709,528,553,782,237053],
			['Troms Romsa',156494,1457,930,527,4627,1683,4260,642,367,894,157388],
			['Finnmark Finnmárku',72856,652,514,138,2433,908,2225,311,208,346,73202]
        ];
        var store = new Ext.data.ArrayStore({
            fields: [
                { name: "state", 	               type: "string"	 },
                { name: "population_01_01_10",	   type: "int"       },
                { name: "born",                    type: "int"       },
                { name: "dead",                    type: "int"       },
                { name: "born_sub_dead",           type: "int"       },
                { name: "moving_in_total",         type: "int"       },
                { name: "moving_in_foreigners",    type: "int"       },
                { name: "moving_out_total",        type: "int"       },
                { name: "moving_out_foreigners",   type: "int"       },
                { name: "neto_movin_in",           type: "int"       },
                { name: "population_growth",       type: "int"       },
                { name: "population_01_10_10",	   type: "int"       }
            ],
            data: data
        });

Let’s have a quick look at this. The first part, line 1-21 is just an array with data we are going to give the store. From line 22 we are setting up an ArrayStore which, in this example, only consists of the field definition. Each element in the fields array is an object with a name, and a datatype. Line 22 tells the store to fetch data from the variable data.

Connecting the GridPanel to the ArrayStore

        var grid = new Ext.grid.GridPanel({
            renderTo:Ext.getBody(),
            store: store,
            autoHeight: true,
            cm: new Ext.grid.ColumnModel({
                columns:[
	                { header: "State",                 dataIndex: "state" },
	                { header: "Population 01.01.10",   dataIndex: "population_01_01_10"},
	                { header: "Population 01.10.10",   dataIndex: "population_01_10_10"}
                ]
            })
        });

What we do is to create the GridPanel with a config object telling the store to:

  • renderTo: document.body
  • store: use the store from the variable store.
  • autoHeight: automaticly set the height of the gridpanel based on the content
  • cm: use a columnmodel with 3 columns

As you might notice I choose only to use 3 of the columns available in the store. This was just to make stuff more simple to read.

Very simple – and it will produce the example you see above. Read on to find out how to do a bit more advanced stuff.

Customizing the GridPanel

Sorting GridPanel

Let’s say you want to add sorting to all columns in the GridPanel. Modify the GridPanel code to the following:

        var grid = new Ext.grid.GridPanel({
            renderTo:Ext.getBody(),
            store: store,
            autoHeight: true,
            cm: new Ext.grid.ColumnModel({
            	defaults: {
	                sortable: true
	            },
                columns:[
	                { header: "State",                 dataIndex: "state" },
	                { header: "Population 01.01.10",   dataIndex: "population_01_01_10"},
	                { header: "Population 01.10.10",   dataIndex: "population_01_10_10"}
                ]
            })
        });

What we did here was to set a default value for all columns in the columnmodel, sortable:true.

You can also specify which columns you want to be sortable:

        var grid = new Ext.grid.GridPanel({
            renderTo:Ext.getBody(),
            store: store,
            autoHeight: true,
            cm: new Ext.grid.ColumnModel({
                columns:[
                     { header: "State",                 dataIndex: "state" },
                     { header: "Population 01.01.10",   dataIndex: "population_01_01_10", sortable: true},
                     { header: "Population 01.10.10",   dataIndex: "population_01_10_10", sortable: true}
                ]
            })
        });

Try clicking the header of the 3 columns over will show you that state cannot be sorted, while the two population columns can be sorted.

Adding hidden columns to GridPanel

As mentioned before we have a lot of columns in the store, but only 3 are shown in the grid. Let’s say we want to add a few more columns, but they shall not be visible by default.

        var grid = new Ext.grid.GridPanel({
            renderTo:Ext.getBody(),
            store: store,
            autoHeight: true,
            cm: new Ext.grid.ColumnModel({
                columns:[
                     { header: "State",                 dataIndex: "state" },
                     { header: "Population 01.01.10",   dataIndex: "population_01_01_10", sortable: true},
                     { header: "Population 01.10.10",   dataIndex: "population_01_10_10", sortable: true},
                     { header: "New born",              dataIndex: "born",                sortable: true, hidden: true}
                ]
            })
        });

In the above example you can try clicking on the “down arrow” in on of the column headers and chose “Columns”. There you will se the column “New born”.
There is another interesting config parameter that can be set asociated to the hidden parameter. That is: hideable, a boolean parameter that says if it is allowed to hide the column or not.

Adding listeners to a GridPanel

Say we want something to happen when we click a row in the gridpanel. Lets have a look at listeners!

        var grid = new Ext.grid.GridPanel({
            renderTo:Ext.getBody(),
            store: store,
            autoHeight: true,
            cm: new Ext.grid.ColumnModel({
                columns:[
                     { header: "State",                 dataIndex: "state" },
                     { header: "Population 01.01.10",   dataIndex: "population_01_01_10", sortable: true},
                     { header: "Population 01.10.10",   dataIndex: "population_01_10_10", sortable: true},
                     { header: "New born",              dataIndex: "born",                sortable: true, hidden: true}
                ]
            }),
	        listeners: {
	            rowclick: function(grid, rowI, event)   {
	                alert("You clicked row "+rowI);
	            }
	        }
        });

Try clicking in one of the rows above. You see? The gridpanel has LOTS of listeners you can play around with, if you need more example – give a a hint on twitter.com/nilsfredrik or in the comments below.

Here are some further reading for you:

Further reading

Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools
Beginning PHP RIA Using Extjs
Zend Studio for Eclipse Developer's Guide


53 Responses to “ExtJs GridPanel”

  1. Houston 31 January 2016 at 06:20 Permalink

    My brother recommended I would possibly like this blog.
    He used to be entirely right. This submit truly made my day.
    You can not consider just how so much time I had spent for this information! Thank you!

  2. card stud game 31 January 2016 at 06:48 Permalink

    Nice post. I used to be checking constantly this weblog and I’m inspired!
    Extremely helpful information specifically the remaining part :) I deal with such information much.
    I used to be looking for this certain info for a long time.
    Thanks and best of luck.

  3. .xd2lksbsv 31 January 2016 at 09:22 Permalink

    I do agree with all the ideas you have introduced
    on your post. They’re very convincing and will definitely work.
    Nonetheless, the posts are very short for newbies. Could you please lengthen them a bit from next time?
    Thanks for the post.


Leave a Reply