19 December 2010 ~ 13 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


13 Responses to “ExtJs GridPanel”

  1. Ajan 8 June 2011 at 15:07 Permalink

    Hello,
    This tutorial looks very good. But I also want to add paging toolbar to grid Panel. I used bbar: new Ext.PagingToolbar({
    store : store,
    pageSize :500,
    displayInfo :true
    }),

    for paging toolbar. Problem is that I don’t know how to specify number of records to display per page on grid panel. totalProperty doesn’t work in store. I don’t know why? Hope you can answer my question.

  2. mj 16 June 2012 at 02:41 Permalink

    how do i add a action column?

  3. Rahul 11 September 2012 at 07:05 Permalink

    Thank You. This article was helpful.

  4. Emilia Baltazor 9 June 2013 at 10:39 Permalink

    Wow, fantastic blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your web site is magnificent, let alone the content!. Thanks For Your article about ExtJs GridPanel Extjs A front-end development blog .

  5. ds 12 July 2013 at 11:22 Permalink

    Thanks aton for such an easy and helpful article

  6. Cherri Cooner 29 July 2013 at 05:57 Permalink

    Wow, wonderful blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your web site is excellent, let alone the content!. Thanks For Your article about ExtJs GridPanel Extjs A front-end development blog .

  7. Miles Mondelli 1 October 2013 at 03:37 Permalink

    Wow, incredible blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your website is magnificent, let alone the content!. Thanks For Your article about ExtJs GridPanel Extjs A front-end development blog .

  8. Marian 16 March 2014 at 20:29 Permalink

    Oh my goodness! Incredible article dude! Thanks, However I am having difficulties with your RSS. I don’t know the reason why I can’t join it. Is there anybody else getting identical RSS issues? Anyone who knows the answer will you kindly respond? Thanx!!

  9. gold standard kratom extract 24 July 2014 at 17:45 Permalink

    Our digestive system is the main source for us to extract energy.
    It is important not to combine other drugs with valium before
    consulting your doctor as it may react with the other
    drugs causing severe side effects. Depending on their action on the
    body, fiber is classified in to two types.

  10. roses lyrics meg and dia 25 August 2014 at 06:39 Permalink

    Asking questions are really nice thing if you are not understanding anything entirely, except this
    paragraph provides nice understanding even.

  11. dead sea products 1 September 2014 at 19:54 Permalink

    If some one needs expert view concerning running a blog then i suggest him/her to
    pay a visit this blog, Keep up the fastidious job.

  12. Thanks for the marvelous posting! I seriously enjoyed reading it, you could be a great author.
    I will make sure to bookmark your blog and will eventually come back at some
    point. I want to encourage you to definitely continue your great work, have a
    nice evening!

    my blog post … hay day hacked game (http://haydaygame.puzl.com/news/id/15043/article/hay-day-game-hints-tricks-and-secrets)

  13. Freddie 11 September 2014 at 03:25 Permalink

    It’s wonderful that you are getting ideas from this article as well
    as from our discussion made at this place.


Leave a Reply