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.

Leave a Reply