extjs grid: re-get data from server when click button - extjs

Question

I am try to research Extjs- grid. I created a button to display grid when click it. My code like below:
function onDisplay() {
Ext.onReady(function () {
var proxy = new Ext.data.HttpProxy({
url: 'server.jsp'
});
var reader = new Ext.data.JsonReader({}, [{
name: 'bookId',
mapping: 'bookId'
}, {
name: 'bookName'
}])
var gridStore = new Ext.data.Store({
proxy: proxy,
reader: reader
});
gridStore.load();
cols = [{
header: "bookId",
width: 60,
dataIndex: 'bookId',
sortable: true
}, {
header: "bookName",
width: 60,
dataIndex: 'bookName',
sortable: true
}];
var firstGrid = new Ext.grid.GridPanel({
store: gridStore,
columns: cols,
renderTo: 'example-grid',
width: 540,
height: 200
});
});
}
But when i click button N times -> it is displayed N grids. I only want display one grid and after click button it will get data from server again.
Please help me.
Thank you

Answer 1

You might want to look at some of the ExtJS Grid examples. They have lots of information about rendering grids from a store, and creating toolbars (which may include refresh buttons, for example). After cleaning up your example code a bit, I've come up with this:
Ext.onReady(function(){
var proxy=new Ext.data.HttpProxy( {url:'server.jsp'});
var reader=new Ext.data.JsonReader({},[
{name: 'bookId', mapping: 'bookId'},
{name: 'bookName'}
])
var gridStore=new Ext.data.Store({
proxy:proxy,
reader:reader
autoLoad:true
});
cols= [
{header: "bookId", width: 60, dataIndex: 'bookId', sortable: true},
{header: "bookName", width: 60, dataIndex: 'bookName', sortable: true}
];
var firstGrid = new Ext.grid.GridPanel({
store : gridStore,
columns : cols,
renderTo :'example-grid',
width :540,
height :200
});
//this code should ensure that only the grid updates,
//rather than rendering a whole new grid each time
var button = Ext.Button({
renderTo: "ButtonContainerId",
listeners: {
'click': function() {
gridStore.load()
}
}
})
});