This tutorial will walk through how to implement a simple Ext JS datagrid, using a GridPanel to display structured data in a user-friendly grid.

Screeshot for this tutorial:

The grid is, without doubt, one of the most widely-used components of Ext. We all have data, and this needs to be presented to the end user in an easy-to-understand manner. The spreadsheet (a.k.a.: grid) is the perfect way to do this—the concept has been around for quite a while because it works. Ext takes that concept and makes it flexible and downright amazing!

Terminology:

Displaying data in a grid requires two Ext components:

• A store that acts like an in-memory database, keeping track of the data we want to display
• A grid panel that provides a way to display the data stored in a data store

Before we start to create each of these, let’s look at some of the terminology that will be used, because this can be confusing at first:

• Columns: This refers to a whole column of data, and would contain information only relevant to the display of data down through the entire column, including the heading. In Ext JS, this information is part of the Column Model.
• Fields: This also refers to an entire column of data, but is refers to the actual data values. With Ext JS, this is used in the reader, for loading data.

Before we get started, you must configure your project to use Ext JS library. If you do not know how to do it, you can check it out this tutorial.

Setting up a data store:

The first thing we need to do is set up our data, which will be placed into a data store. The data store types available in Ext give us a consistent way of reading different data formats such as XML and JSON, and reading this data in a consistent way throughout all of the Ext widgets. Regardless of whether this data it is JSON, XML, an array, or even a custom data type of your own, it’s all accessed in the same way thanks to the data store.

Some data stores available, by default, in Ext are:

• Simple (Array)
• XML
• JSON

Step 1: Adding data to our data store:

In this first example, we are going to use a simple (array) data store, represeting a simple agenda (name, phone, email and birthday date).

The data store needs two things: the data itself, and a description of the data—or what could be thought of as the fields. A reader will be used to read the data from the array, and this is where we define the fields of data contained in our array. The reader acts as an interpreter of sorts; it knows how to interpret a string of data as rows of data to be used with Ext JS.

Step 2: Defining your data for the data store

The reader needs to know which fields to read in as data for our data store, so we will need to define these.

Fields are defined using an array of objects—or if the data is to be read verbatim, just a string specifying the field name. All except one of our fields in this example can be defined with a simple name. For example, the title field could be defined using an object like this:

{name: ‘title’}

However, in our case, because we are just reading in the data as a string, we can simply pass the field name and save some typing:

‘title’

The released field is different because we want to treat its data appropriately, as a date type. For each field format type, there may be options to define the format of the data more explicitly. With the date type, there is a dateFormat string that needs to be defined. If you have used PHP, these date format strings will look familiar, because Ext uses the same date format strings that PHP does.

{name: ‘released’, type: ‘date’, dateFormat: ‘Y-m-d’}

Here are some datatypes supported by ExtJS: string, int, float, boolean, date.

Step 3: Displaying the GrigPanel

The thing that pulls everything together is the GridPanel, which takes care of placing the data into columns and rows, along with adding column headers, and boxing everything together in a neat little package.

Code:

Ext.onReady(function(){

	Ext.BLANK_IMAGE_URL = '/extjs-grid-simple-array/ext-3.0.3/resources/images/default/s.gif';

	//array with data
    var myData = [
        ['Meyers, Quyn R.',	    '(943) 570-5141', 'Proin@nullamagna.ca',    '05/13/1990'],
		['Whitney, Tad T.',	    '(547) 743-0343', 'vulputate@acurnaUt.org', '05/10/1987'],
		['Lawrence, Flavia J.',	'(404) 826-4553', 'dapibus.id@accumsan.ca',	'01/05/1988'],
		['Morales, Susan I.',	'(276) 707-8084', 'tristique@seacmetus.com','03/09/1992'],
		['Merrill, Desiree Q.', '(911) 546-0559', 'dictum.cursus@vel.ca',   '01/07/1981'],
		['Hampton, Willa Y.',	'(729) 562-8303', 'nascetur@stellus.ca',    '06/17/1991'],
		['Brewer, Brynne F.',	'(818) 302-4393', 'ligula@ullamcorper.org',	'04/20/1989'],
		['Marsh, Drew D.',	    '(645) 671-2779', 'et.euismod.et@eget.ca',	'02/13/1990']
    ];

    //data store - description of fields
    var store = new Ext.data.SimpleStore({
        fields: [
           'name',
           'phone',
           'email',
           {name: 'birthday', type: 'date', dateFormat: 'd/m/Y'}
        ]
    });

    //read the data from simple array
    store.loadData(myData);

    // create grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "NAME", width: 170, sortable: true, dataIndex: 'name'},
            {header: "PHONE #", width: 150, sortable: true, dataIndex: 'phone'},
            {header: "EMAIL", width: 150, sortable: true, dataIndex: 'email'},
            {header: "BIRTHDAY", width: 100, sortable: true, dataIndex: 'birthday',
            	renderer: Ext.util.Format.dateRenderer('d/m/Y')}
        ],
        title: 'My Contacts',
        autoHeight:true,
        width:590,
		renderTo: document.body,
		frame:true
    });

    //render to DIV
    grid.render('grid-simple-array');
});

You can download the source code in my Github: http://github.com/loiane/extjs-grid-simple-array

Reference: Learning Ext JS – Book