floating facebook button arrow left side

ExtJS Grid Tutorial – Framework

How to create a simple extjs grouping grid.

These days, frameworks are in demand and JavaScript is no exception. Ext JS is an open source  cross-browser library of JavaScript. It is used for building rich applications. Thus the web applications built by using Ext JS are faster than the ones without, and have very intuitive usage. It offers high performance and UI widgets that are also customizable. Ext JS has perfectly designed and expandable component model. It is very easy API that can be used intuitively. Licenses are available for its commercial and open source use.

Ext JS is supported on the following browsers :

1)      Firefox 1.5+

2)      Safari 3+

3)      Internet Explorer 6+

4)      Opera 9+

5)      Chrome 3+

Ext JS is being used for developing Rich Internet Applications. It can be employed for creation of Ext JS Grid, Chart, Tree, Window, TabPanel, ComboBox, Layout Managers and Toolbars/ Menus.

Here you can learn the steps to create simple Ext JS Grid.

Step 1: Setting up of Ext JS is a prerequisite . You can download the current release of Ext from the website of Ext JS.

Step 2: In order to run Ext JS you must have HTTP server or a PHP server. We are trying to build a simple Ext JS Grid, as grid is the most famous widget being integrated in various web applications using Ext JS Grid.

Step 3: It is very easy to build and run a simple base grid and make it run. You need to replace the existing code from the file ExtStart.js by the following code. The most important function that will be used in each and every page is onReady() function of Ext. After the loading of DOM this method will automatically be loaded.

Book Your Seats Now, Be a Part of the Live Online Training : ExtJS Live Training


Ext.onReady(function() {
        var myData = [
               ['Apple','9/1 12:00am'],
               ['Ext','9/12 12:00am'],
               ['Google','10/1 12:00am'],
               ['Microsoft','7/4 12:00am'],
               ['Yahoo!','5/22 12:00am']
        ];
        var myReader = new Ext.data.ArrayReader({}, [
               {name: 'company'},
               {name: 'meetingtime', type: 'date', dateFormat: 'n/j h:ia'}
        ]);
        var grid = new Ext.grid.GridPanel({
               store: new Ext.data.Store({
                       data: myData,
                       reader: myReader
               }),
               columns: [
                       {header: 'Company', width: 120, sortable: true, dataIndex: 'company'},
                       {header: 'Meeting Time', width: 120, sortable: true,
                               renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                                dataIndex: 'lastChange'}
               ],
               viewConfig: {
                       forceFit: true
               },
               renderTo: 'content',
               title: 'Simple Ext JS Grid',
               width: 500,
               autoHeight: true,
               frame: true
        });
        grid.getSelectionModel().selectFirstRow();
});

Explanation of Code in file ExtStart.js

1)      myData is used to create array of some dummy data that is required in the grid panel. In real applications, you can also load the data from some database and web service.

2)      myReader is to form data reader which knows the way to interpret the information and change it into some usable records to be used by data store of Ext JS grid. There are number of Reader classes available for varieties of data.

3)      Ext JS Grid Widget is created to pass all type of configuration values.

4)      In the last line the grid is asked to highlight the first row by using Selection Model.

In this way it is very easy to create a simple Ext JS Grid in any Rich Web Application.

Read more on ExtJS Tutorial

Looking for Online ExtJs Tutorial , get downloaded free with some extjs grid example to help you out while reading the e-book

You can leave a response, or trackback from your own site.

26 Responses to “ExtJS Grid Tutorial – Framework”

  1. leukemia life expectancy says:

    great tips! Thanks.

  2. Shandi Breen says:

    Formidable article,very Best.

  3. Trent Dekrey says:

    Nice article,thank you for sharing this!

  4. Johnny Wierzbicki says:

    You write Good articles,keep up good work.

  5. Kevin Border says:

    Keep up good work,very good article.

  6. Burton Haynes says:

    You are probably right. Your idea is good an i think that would be useful for everybody. I’ll look more deeply into.

  7. Gaurav says:

    Great article to start with. Just a small clarification for some one thick-headed like me.

    1. For dataIndex of the 2nd column, the value would be ‘meetingtime’ instead of ‘lastChange’:

    dataIndex: ‘meetingtime’

    2. In the HTML/JSP file where this script would be placed, there must be a div tag with id as content:

    Thanks to the author

  8. extjstutorial.org says:

    ExtJS grid Tutorial…

    These days, frameworks are in demand and JavaScript is no exception. Ext JS is an open source cross-browser library of JavaScript. It is used for building rich applications. Thus the web applications built by using Ext JS are faster than the ones witho…

  9. Alexey says:

    What property I must use to set column width max availible width?

  10. [...] people ask what Ext JS Grid is used for? This is used for establishing Rich Online Software [...]

  11. [...] Page Extjs Grid Many people ask what Ext JS Grid is used for? This is used for establishing Rich Online Software [...]

  12. [...] people ask what Ext JS Grid is used for? This is used for establishing Rich Online Software [...]

  13. [...] people ask what Ext JS Grid is used for? This is used for establishing Rich Online Software [...]

  14. [...] people ask what Ext JS Grid is used for? This is used for establishing Rich Online Software [...]

  15. [...] people ask what Ext JS Grid is used for? This is used for establishing Rich Online Software [...]

  16. [...] people ask what Ext JS Grid is used for? This is used for establishing Rich Online Software [...]

  17. keep up the good job I appreciate

  18. Great – I should certainly pronounce, impressed with your site. I had no trouble navigating through all tabs as well as related information ended up being truly simple to do to access. I recently found what I hoped for before you know it in the least. Reasonably unusual. Is likely to appreciate it for those who add forums or something, web site theme . a tones way for your customer to communicate. Excellent task..

  19. devilworship says:

    Hello everybody, here every one is sharing such know-how, so it’s fastidious to read
    this website, and I used to go to see this website everyday.

  20. An interesting discussion is definitely worth comment.

    I do think that you should write more on this issue, it
    might not be a taboo matter but usually folks don’t
    speak about such issues. To the next! All the best!!

  21. Your way of telling the whole thing in this post is really fastidious, every one be capable
    of easily be aware of it, Thanks a lot.

  22. Great article! This is the type of information that are meant to be shared around the internet.
    Disgrace on Google for no longer positioning this put up upper!

    Come on over and visit my website . Thank you =)

  23. Hello my friend! I want to say that this post is amazing,
    nice written and come with almost all significant infos.
    I would like to see extra posts like this .

  24. Excellent blog here! Also your web site loads
    up fast! What web host are you using? Can I get your affiliate link to your host?
    I wish my site loaded up as fast as yours lol

  25. Gratuitement says:

    Woah! I’m really enjoying the template/theme of this website.

    It’s simple, yet effective. A lot of times it’s very difficult to get that “perfect balance” between superb usability and appearance.

    I must say you have done a great job with this.
    Additionally, the blog loads extremely quick for me on Internet explorer.
    Excellent Blog!

  26. Thanks for each alternate beneficial web site. The place in addition could I am getting in which variety of info printed in this kind of ideal technique? For sale endeavor that we are just now working on, and I’ve ended up with the look out for these information and facts. Thanks for each alternate beneficial web site. The place in addition could I am getting in which variety of info printed in this kind of ideal technique? For sale endeavor that we are just now working on, and I’ve ended up with the look out for these information and facts.

Leave a Reply