EXT GRID SAMPLE

[a.buchhi.reddy]

Grid Operations on Json Reader Data

done by cognizant- Hyderabad-jagadish

/**
* @author 138721
*/
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

var bd = Ext.getBody();

var fields = [{name: 'name', mapping: 'name'},
{name: 'lastName', mapping: 'lastName'},
{name: 'middleName', mapping: 'middleName'},
{name: 'dob', mapping: 'dob'},
{name: 'street', mapping: 'street'},
{name: 'city', mapping: 'city'},
{name: 'country',mapping: 'country'}
]
var Jsonrecords = new Ext.data.JsonStore({
root: 'records',
fields: fields
});
var cols = [{id: 'name', header: 'Name', dataIndex: 'name'},
{header: 'Last Name', width: 150,sortable: true,dataIndex: 'lastName'},
{header: 'Middle Name',width: 150,sortable: true,dataIndex: 'middleName'},
{header: 'DOB', dataIndext: 'dob'},
{header: 'Street',dataIndex: 'street'},
{header: 'City',dataIndex: 'city'},
{header: 'Country',dataIndex: 'country'}
];

var firstGrid = new Ext.grid.GridPanel({
store : Jsonrecords,
columns : cols,
autoExpandColumn : 'name',
width : 500,
height : 300,
region : 'west',
frame : true,
title : 'First Grid',
viewConfig: {
forceFit: true
},
sm : new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowSelect: function(sm,row,rec){
//Ext.MessageBox.alert('Status', rec);
Ext.getCmp("form1").getForm().loadRecord(rec);
}
}
})
});

bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});

var form1 = new Ext.FormPanel({
id: 'form1',
width: 700,
frame: true,
title: 'Personal Information',
layout: 'column',
border: true,
items:[{
xtype: 'fieldset',
defaultType: 'textfield',

items:[{
fieldLabel: 'First Name',
name: 'name'
},{
fieldLabel: 'Last Name',
name: 'lastName'
},{
fieldLabel: 'Middle Name',
name: 'middleName'
},{
fieldLabel: 'Date Of Birth',
name: 'dob'
}]
},{
xtype: 'fieldset',
defaultType: 'textfield',
title: 'Address Information',
items:[{
fieldLabel: 'street',
name: 'street'
},{
fieldLabel: 'city',
name: 'city'
},{
fieldLabel: 'country',
name: 'country'
}]
},{
items : [firstGrid]
}],
buttons: [{
text: 'Add',
id : 'addButton'
},{
text: 'Delete',
id: 'delButton'
},{
text: 'Update',
id: 'updButton'
}],
renderTo: bd
});
form1.render(document.body);

Ext.get('addButton').on('click', function(){
var rec = new Ext.data.Record({name: Ext.get("name").getValue(),lastName: Ext.get("lastName").getValue(),
middleName: Ext.get("middleName").getValue(), dob: Ext.get("dob").getValue(),
street: Ext.get("street").getValue(), city: Ext.get("city").getValue(),
country: Ext.get("country").getValue()
}
);
Jsonrecords.add(rec);
})
Ext.get('delButton').on('click',function(){
if (firstGrid.getSelectionModel().getSelected() != null)
Jsonrecords.remove(firstGrid.getSelectionModel().getSelected());
});
Ext.get('updButton').on('click',function(){

if (firstGrid.getSelectionModel().getSelected() != null)
{
var updRec = firstGrid.getSelectionModel().getSelected();
updRec.set("name",Ext.get("name").getValue());
updRec.set("lastName",Ext.get("lastName").getValue());
updRec.set("middleName",Ext.get("middleName").getValue());
updRec.set("dob",Ext.get("dob").getValue());
updRec.set("street",Ext.get("street").getValue());
updRec.set("city",Ext.get("city").getValue());
updRec.set("country",Ext.get("country").getValue());
}
});
});

[posta07]

Please post this to the ext JS forum.

This is for GWT-Ext