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


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

  4. While you might find tickets that are specifically for students or youth,
    our Travel Professionals are proficient in the art of round
    the world wizardry and will constantly find
    you the very best ticket, whoever you are.

  5. They have actually been useful withh my million concerns,
    revealed me any kind of variety of blinds and was also fitting witgh
    my routine.

    My blog: roller shutters – https://about.me/taylorandstirlingvic
    -

  6. Retractable Flyscreens 3 March 2016 at 21:41 Permalink

    Unlike horizontal blinds, vertical blinds
    are much less likely to gather dust due to thhe fact that they stand vertically.

    Also vissit my homepage Retractable Flyscreens

  7. autopage remote start 7 March 2016 at 04:48 Permalink

    Win It: Bulldog Security is generously offering (1) Do It Yourself RS82B Remote Starter to a fortunate winner!

  8. Ouur construction dumpster austin tx as well
    as demolition dumpsters vary inn dimension so it must be very
    easy to locate the ideal dumpster for your job.

  9. beveiligingscamera 24 March 2016 at 06:28 Permalink

    There is definately a great deal to know about this topic.
    I really like all of the points you have made.

  10. max muscle extreme 6 April 2016 at 13:02 Permalink

    Optimum in Musclebuilding results, although I enjoy excercises that are minimum in action while you can easily see.

    This exercise looks easy enough, but if done
    effectively may blast your hands, along side primary, giving
    you complete description in your biceps, triceps and mid-section. I’m always looking for rapid ways to work
    my hands. This workout is fantastic for work breaks, but is also
    excellent to accomplish in the gym. It’s a great workout since
    it works your biceps, triceps and deltoids.
    By maintaining your key involved it will also work your waist.
    Huh, good benefit?

    The ranking one is the fact that you ought to bed since your muscles are e’er there building muscles isn’t creating muscles.
    But you cannot view them, since they are down the fat. So
    if you essential to illustrate muscle tissue, you
    should failure your fat first. Corydalis Delmonte’s no-nonsense
    difficult structure tells us how-to do the apply, HOWTO composition your diet plan, HOWTO complete your nutrition and the way
    to create your muscles. We have to human a notice, managing your diet does not mingy also fat and avoiding your rapid, because if you impoverishment to advance
    the muscles, you ought to hump carbohydrates
    that are sufficiency, gas. It firm that you need to spend solon looking after what you consume; it is possible to attain every one
    of these content within this truth.

    find more info ===> max muscle extreme


Leave a Reply