From Learn About the Ext JavaScript Library

If you haven't read part 1 and part 2, I suggest you read them first.

So at this point, we have a working Datastore. Now we need to bind a component to the Datastore. In this case a Grid.

The Grid

Lets start with a grid without any data.

var grid; // grid component
	var xg = Ext.grid;
 
	// ----------------
	//	Create grid
	// ----------------	
	function createGrid()
	{
	    grid = new xg.GridPanel(
	    {
 
	        // define the colomns to show
	        cm: new xg.ColumnModel(
		        [
		            {id:'name',header: "Name",  sortable: true, dataIndex: 'name'},
		            {id:'email',header: "E-mail",  sortable: true, dataIndex: 'email'}
		        ]
	        ),        
 
	        // make the columns fit
	        viewConfig: 
	        {
	            forceFit:true
	        },
 
			width:950,
 
			// yeah zebra stripes
	        stripeRows:true,
 
	        title:'Search results',
	        iconCls:'icon-grid',
	        renderTo: "gridWrapper",
	        autoHeight:true
 
	    });
	} 
 
	createGrid();

So now let's add the datastore

function createGrid()
{
    grid = new xg.GridPanel(
    {
        store: ds, // use the datasource
 
        cm: new xg.ColumnModel(
	        [
	            {id:'name',header: "Name",  sortable: true, dataIndex: 'name'},
	            {id:'email',header: "E-mail",  sortable: true, dataIndex: 'email'}
	        ]
        ),        
 
        viewConfig: 
        {
            forceFit:true
        },
 
	width:950,
        stripeRows:true,
        title:'Search results',
        iconCls:'icon-grid',
        renderTo: "gridWrapper",
        autoHeight:true
 
    });
}

Notice the line

store: ds

This is the reference to the datastore. Also when you look at

dataIndex: 'name'

This is how the Grid know wich data (provided by the datastore and mapped by the reader) belongs to what column. So 'name' should be avaible in the reader.

Row expander

Now when you look at the live example [1] then you will notice that each row can be expanded. This is a nice little feature called rowexpander. The best thing about the row expander is that you can use a template to define the expander :

// ----------------
//	Create expander
// ----------------	
var expander = new xg.RowExpander({
    tpl : new Ext.Template(
        '<p>{comments}</p>'
    )
});

The row expander has access to the data the datastore provided and you can access it by putting the fieldname between brackets.

And now we put the expander in the grid:

function createGrid()
{
    grid = new xg.GridPanel(
    {
        store: ds, // use the datasource
 
        cm: new xg.ColumnModel(
	        [
	        	expander,
	            {id:'name',header: "Name",  sortable: true, dataIndex: 'name'},
	            {id:'email',header: "E-mail",  sortable: true, dataIndex: 'email'}
	        ]
        ),        
 
        viewConfig: 
        {
            forceFit:true
        },
 
        // add the expander        
        plugins: expander,
		collapsible: true,
		animCollapse: false,
 
		width:950,
        stripeRows:true,
        title:'Search results',
        iconCls:'icon-grid',
        renderTo: "gridWrapper",
        autoHeight:true
    });
}

Now we have linked the grid to a datastore, but it's still empty because the datastore never retrieves data.

So up to the next chapter, adding the livesearch.

http://extjs.com/learn/Tutorial:Building-grid-with-livesearch-form--chapter-4