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


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

  14. flutter wireless 21 September 2014 at 04:39 Permalink

    Pretty! This was an extremely wonderful post.
    Thanks for providing these details.

  15. Dino Hunter Deadly Shores Hack 21 September 2014 at 04:54 Permalink

    Wow! Finally I got a website from where I be capable of really take helpful data regarding
    my study and knowledge.

  16. Mia Airport Parking 21 September 2014 at 13:47 Permalink

    Hi there. My name is Clarence Arvidson. Office supervising exactly what
    she does in their own day job. Her husband and her survive in Hawaii but now she is considering great features include.
    The favorite hobby and her kids is kit cars but she doesn’t feature the time not
    too lengthy ago.

    Look at my blog post; Mia Airport Parking

  17. Www.Slideshare.Net 23 September 2014 at 08:28 Permalink

    I’m really loing the theme/design of yur site. Do you ever rrun into any browser compatibility
    issues? A handful of my blog readers have complained about my
    website not operating correctly inn Explorer but looks great in Firefox.
    Do you have anny recommendations to help fix thiss problem?

  18. masturbazione 24 September 2014 at 09:21 Permalink

    Asking questions are in fact nice thing if you are not understanding something entirely, but this
    piece of writing presents pleasant understanding
    even.

  19. Cloud Based Repossession Software 26 September 2014 at 08:09 Permalink

    In the cloud accounting system that is basically
    online, the owner can view his financial position at any point of time without having to
    worry for the interface and this is not the case with CPA firm
    accounting. These platforms allow registrants to easily find
    themselves a perfect partner from around the world by
    matching their attitudes and requirements out of life.
    We pause the first one and keep testing against
    the next best one.

    Visit my web site Cloud Based Repossession Software

  20. Portable Ice Maker 26 September 2014 at 15:15 Permalink

    This is very interesting, You are a very skilled blogger. I’ve joined your feed and look forward to seeking more of your wonderful post.
    Also, I’ve shared your web site in my social networks!

  21. League of Angels Hack Tool 27 September 2014 at 15:45 Permalink

    Hi! This post couldn’t be written any better!
    Reading this post reminds me of my previous room mate!
    He always kept talking about this. I will forward this post to him.

    Pretty sure he will have a good read. Many thanks for sharing!

  22. Clash of Lords 2 Hack 30 September 2014 at 03:07 Permalink

    Excellent site you have got here.. It’s difficult to find quality writing like yours these days.
    I truly appreciate individuals like you! Take care!!

  23. high quality carpet 2 October 2014 at 07:54 Permalink

    I was recommended this web site by my cousin. I’m not sure whether this post is written by him
    as no one else know such detailed about my trouble.

    You’re amazing! Thanks!

  24. nitric oxide supplement verdict 7 October 2014 at 07:44 Permalink

    Undeniably believe that which you stated.
    Your favorite reason seemed to be on the internet the easiest thing to be aware of.
    I say to you, I definitely get annoyed while people consider worries that they just
    don’t know about. You managed to hit the nail upon the top and defined out the whole thing without having side effect , people can take a signal.

    Will likely be back to get more. Thanks

  25. french top 20 songs chart 9 October 2014 at 20:58 Permalink

    Movie star and singer Patrick Bruel has been considered one of France’s biggest stars through
    the ’90s, first making their name as being a teen idol and
    leading a return to traditional French chanson inside new millennium.

    Bruel was created Patrick Benguigui in Tlemcen, Algeria, on, may 14, 1959.
    Their father abandoned your family when Patrick was merely a year old, including 1962, after Algeria won its independence, his mummy moved to France, negotiating
    inside the Paris suburb of Argenteuil. An excellent
    soccer player in the youth, Patrick first chosen the idea of like a singer after seeing Michel Sardou perform in 75.

    As good luck would have it, acting would bring him his first
    good results; first-time director Alexandre Arcady ran an offer seeking a new man using a French-Algerian (or “pied-noir” in German slang) accent for his movie Le
    Coup hun Sirocco. Benguigui (as he was still called) responded and gained the part.
    The next year, he spent a while in New York City, where he
    fulfilled Gérard Presgurvic, later being his most
    important songwriter.

    Source: http://texlinesourcingbd.com/?p=19

  26. somerset accommodation 10 October 2014 at 09:50 Permalink

    I employed a freelancer to complete my search engine optimisation and about
    6 weeks later I checked and the website had gone down in the rankings, not a good sign I take it?

    Bookmarked your blog, lets hope you keep up to date with regular
    posts!

  27. Bribie Wedding Photography 21 October 2014 at 13:48 Permalink

    The Maheno was a luxury passenger ship which was built in 1905
    in Scotland. Not only is this a great location for human experiences but the channel is home for
    numerous species of turtles and dolphins who can rest here.
    This park is positioned on the island’s southernmost end, and it showcases approximately
    190 dissimilar kinds of water as well as wading birds.

  28. annonces football 23 October 2014 at 03:25 Permalink

    Older students will always require more storage space
    than those in lower grades. Prices of contemporary furniture, as with any
    industry, depend on the designer and brand name.

    Consider investing in durable wooden tables tops which are safer and
    stronger against your young ones.

  29. oak console table 8 November 2014 at 07:53 Permalink

    Found a cool variable height table a week ago on the internet, i’m still looking for it in a showroom though so I could try it out.

  30. laptop sh 22 November 2014 at 02:01 Permalink

    Notebooks are easy to carry and make great travel companions.

    A notebook weighs between 5 to 10 pounds; an ultralight model is even lighter.
    This movie essentially changed date movies and set a ridiculous high bar for guys to
    reach with their girlfriends.


Leave a Reply