Basic structure of an ExtJS grid

Ext.onReady(function()
{
var arr=document.getElementById("hdnField1").value;
var splitter=arr.split("|");
var myData = [[splitter[0],splitter[1]]];
// create the data store
var store = new Ext.data.SimpleStore
({
fields: [{name: 'Name'},{name: 'Designation'}]
});
store.loadData(myData);
// create the Grid
var grid = new Ext.grid.GridPanel
({
store: store,
columns: [{header: "Name", sortable: true, dataIndex: 'Name'},{header: "Designation", sortable: true, renderer: 'Designation'}],
stripeRows: true,height:320,width:240,title:'Array Grid'
});
grid.render('grid-example');
});


Of course, to make this work, you have to have the extJS libraries included first.Include them as follows:

>view your HTML code, and add the Javascript tags .The ExtJS path goes into the src property of the JS tag. I will be posting many more examples of ExtJS forms here. Be on the prowl until then...