From Learn About the Ext JavaScript Library

I would suggest downloading the code used for this example here so you have something to work with. A working example can be found here.

Contents 1 Step 1: Data Definition 1.1 Single Row of XML Sample Data 2 Step 2: Column Model 2.1 Sample Column Model 2.2 Render it! 3 What's Next?

Step 1: Data Definition

First we need to tell the grid what XML element defines each row of data, in this case it's named 'Item' as you can see from the sample XML below.

Single Row of XML Sample Data

<Item>
    <ASIN>0446613657</ASIN>
    <DetailPageURL>
        http://www.amazon[*SNIP*]JVQEG2
    </DetailPageURL>
    <ItemAttributes>
        <Author>Sidney Sheldon</Author>
        <Manufacturer>Warner Books</Manufacturer>
        <ProductGroup>Book</ProductGroup>
        <Title>Are You Afraid of the Dark?</Title>
    </ItemAttributes>
</Item>

Set the record in your schema definition (line 8 of the sample code below) to 'Item' so it corresponds to a row in our XML data. Then we need to define which column contains the unique identifier by setting the 'id' (line 9 of the sample code below). In our sample data this is the 'ASIN' column.

The last part of our data definition are the fields you want to display (line 11 of our sample code). This is just an array with the field names. Make sure these correspond with the element names in your XML data and place them in the order you want the columns displayed in your grid, they don't need to be in the same order they are found in the XML file.

var dataStore = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url: 'sampledata-sheldon.xml'}),
        reader: new Ext.data.XmlReader({
               record: 'Item',
               id: 'ASIN'
           }, [
               'Author', 'Title', 'Manufacturer', 'ProductGroup'
           ])
    });

Step 2: Column Model

The next step would be defining the Column Model, which simply means setting up some properties for the columns that determine how they are displayed and treated. This is an array containing configuration parameters for each column given in the order of the columns as defined in the data definition's "fields" array from the previous step.

Probably the most common configuration variables are going to be header and width, so you will want to make sure to declare at least those two, however width is not required and can be taken care of using the autoWidth/Height functions later on.

Sample Column Model

var colModel = new Ext.grid.ColumnModel([
	{header: "Author", width: 120, dataIndex: 'Author'},
	{header: "Title", width: 180, dataIndex: 'Title'},
	{header: "Manufacturer", width: 115, dataIndex: 'Manufacturer'},
	{header: "Product Group", width: 100, dataIndex: 'ProductGroup'}
]);

The last thing we do is to pass the Grid the data store and column model (lines 22-25), render the grid, then load in the data from our data store. That's really all you need to get your grid up and working.

Render it!

var grid = new Ext.grid.Grid('mygrid', {
        ds: dataStore,
        cm: colModel
});
grid.render();
 
dataStore.load();

What's Next?

Different readers are available for different data source formats such as XML and JSON, a look into the API documentation will get you started customizing the grid components configuration for your particular needs.

• Ext Programmer's API Documentation
• Ext User Forums