dynamically add data to grid

[sathishkumar4]

Hi,
I'm getting response value from below callAjax() functon,and those values were added to grid,when I'm clicking refresh button in grid or when I reload the browser,My problem is I've add values with out clicking the refresh button in the grid,please can you guys give me some ideas...



Ext.onReady(function() {
var myPageSize = 5;
var startRow;
var endRow;

var names = Ext.data.Record.create([{
name: 'firstName'
},
{
name: 'lastName'
}]);

var myReader = new Ext.data.JsonReader({
totalProperty: "results",
root: "rows",

},
names);

var JStore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: 'ajax.jsp',
reader: myReader,
root: 'rows',
totalProperty: 'results',
id: 'id',
fields: ['firstName', 'lastName'],
//paramNames: { start : 0, limit: 7 },
// view: new Ext.grid.GroupingView()
}),
});
JStore.load();

var pagingBar = new Ext.PagingToolbar({
pageSize: 5,
//paramNames: { start : 0, limit: 7 },
store: JStore,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",

items: ['-', {
pressed: true,
enableToggle: true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed) {
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
});

// create the Grid
var grid = new Ext.grid.GridPanel({
height: 250,
width: 650,
store: JStore,
columns: [
//{id:'id'},
{
header: "FirstName",
width: 75
},
{
header: "LastName",
width: 75
}

],
viewConfig: {
forceFit: true,
enableRowBody: true,
showPreview: true,
getRowClass: function(record, rowIndex, p, JsonStore) {
if (this.showPreview) {
p.body = '<p>' + record.data.excerpt + '</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},
// paging bar on the bottom
bbar: pagingBar,

});

var combo = new Ext.form.ComboBox({
store: JStore,
displayField: 'firstName',
fieldLabel: 'Names',
typeAhead: true,
mode: 'remote',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select...',
selectOnFocus: true,
width: 150,
});

var userform = new Ext.form.FormPanel({
renderTo: document.body,
frame: true,
title: 'UserRegistration',
width: 750,
items: [{
xtype: 'textfield',
id: 'firstName',
fieldLabel: 'firstName',
name: 'firstName',
allowBlank: false,
width: 150,
},
{
xtype: 'textfield',
id: 'lastName',
fieldLabel: 'lastName',
name: 'lastName',
allowBlank: false,
width: 150,
},
combo, grid, ],
buttons: [{
text: 'submit',
handler: callAjax
},
{
text: 'cancel',
handler: callAjax
}]
});

grid.render();

JStore.load({
params: {
start: 0,
limit: 5
}
});

});

callAjax = function() {
var firstName = Ext.fly("firstName").getValue();
var lastName = Ext.fly("lastName").getValue();

Ext.Ajax.request({
url: 'ajax.jsp',
params: {
firstName: firstName,
lastName: lastName,
//myPageSize: 5,
},
success: function(res, request) {

Ext.MessageBox.alert('Success', res.responseText);

JStore.load(); //

//loadData(dres);
},
failure: function(res, request) {
Ext.MessageBox.alert('Failure', res.responseText);
},
});
}