Grid pane demo using ExtJs

Files that has been used from ExtJs site for creating demo

· Js/ext-all.js

· Js/ext-base.js

· Css/ext-all.css

• Div which contain the grid is defined in css file ext-all.css in downloaded folder from ExtJS web site .

Creating a ExtJs Grid Demo

Steps and method that to create Grid Demo define in js/Paging.js are following:

1. First we need to create a Datastore from which the grid is attached and access the record.Datastore fetch record from XML orJson source.

Datastore is created using method

Var objectDataSore = new Ext.data.Store();

In this method specify

1.url of the file to connect to database.

2.Json or XML source.

3.Other things like sorting etc.

2. Define a columnmodel(Information about grid column).Columnmodel method define the column structure for the grid.

Columnmodel can de define as

Var objectColumnmodel=new Ext.grid.columnmodel()

3.Pass the grid Datastore and columnmodel.

var grid = new Ext.grid.GridPanel({

                       ds: objectDataSore,

                       cm: objectColumnmodel

        });

We can also define the columnmodel while creating object of Grid Panel instead of defining in column model.

4. Render the Grid

Grid.render();

5.Load in the data from our data store

objectDataSore.load();

Source code for HTMl file: index.html

Source code for javascript file: application.js

Source code for aspx file: dbaccess.aspx