Simple ExtJs Grid Example 2

var store;
var temp;
Ext.onReady(function()
{

var arr=document.getElementById("hdnField1").value;
var splitter=arr.split("|");
var myData = [[splitter[0],splitter[1]]];
// create the data store
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');
});

var clicked=function()
{
var TopicRecord = Ext.data.Record.create(
{name: 'Name', mapping: 'Name'},
{name: 'Designation', mapping: 'Designation'}
);

var myNewRecord = new TopicRecord({
Name: 'Do my job please',
Designation: 'noobie'
});
store.add(myNewRecord);
return false;
}

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...