ExtJs:Show Grid after Button is clicked - extjs4

Question

I have a form in which the values for the Grid is populated as soon as the Form is displayed.But i need to populate the grid after the button is clicked based on text box values.
ExtJs:
var url = location.href.substring(0,location.href.indexOf('/', 14));
var grid;
var store;
var userStore;
Ext.onReady(function(){
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
Ext.define('userList', {
extend: 'Ext.data.Model',
fields: [{ name: 'id', mapping: 'id' },
{ name: 'name', mapping: 'name' },
{ name: 'firstName' ,mapping:'personalInfo.firstName'},
{ name: 'lastName' ,mapping:'personalInfo.lastName'},
{ name: 'gender' ,mapping:'personalInfo.gender'},
{ name: 'email' ,mapping:'personalInfo.address.email'}
]
});
store = Ext.create('Ext.data.Store', {
model: 'userList',
autoLoad: true,
proxy: {
type: 'ajax',
url : url+'/lochweb/loch/users/getUser',
reader: {
type: 'json',
root: 'Users'
}
}
});
function swapStrore(){
//userStore = store;
userStore = Ext.create('Ext.data.Store', {
model: 'userList',
autoLoad: true,
proxy: {
type: 'ajax',
url : url+'/lochweb/loch/users/getUser',
reader: {
type: 'json',
root: 'Users'
}
}
});
Ext.getCmp('userGrid').getView().refresh();
return userStore;
}
function updateUsers(id){
window.location = url+'/lochportal/createUser.do';
}
var searchUsers = new Ext.FormPanel({
renderTo: "searchUsers",
frame: true,
title: 'Search Users',
bodyStyle: 'padding:5px',
width: 900,
items:[{
xtype:'textfield',
fieldLabel: 'Username',
name: 'userName'
},{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'firstName'
},{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'lastName'
},
{
xtype: 'button',
text: 'Search',
listeners: {
click: function(){
Ext.Ajax.request({
method:'GET',
url : url+'/lochweb/loch/users/getUser',
params : searchUsers.getForm().getValues(),
success : function(response){
//console.log(response);
//swapStrore();
}
});
}
}
},{
xtype: 'button',
text: 'Cancel',
listeners: {
click: function(){
window.location = url+'/lochportal/viewSuccessForm.do';
}
}
},
grid = Ext.create('Ext.grid.Panel', {
//plugins: [rowEditing],
id:'userGrid',
width: 900,
height: 300,
frame: true,
store: store,
iconCls: 'icon-user',
columns: [{
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id'
},
{
text: 'Name',
flex: 1,
sortable: true,
dataIndex: 'name',
field: {
xtype: 'textfield'
}
},
{
text: 'FirstName',
flex: 1,
sortable: true,
dataIndex: 'firstName',
field: {
xtype: 'textfield'
}
},
{
text: 'LastName',
flex: 1,
sortable: true,
dataIndex: 'lastName',
field: {
xtype: 'textfield'
}
},
{
text: 'Gender',
flex: 1,
sortable: true,
dataIndex: 'gender',
field: {
xtype: 'textfield'
}
},
{
text: 'Email',
flex: 1,
sortable: true,
dataIndex: 'email',
field: {
xtype: 'textfield'
}
},
{
xtype: 'actioncolumn',
width: 50,
items:[{
icon : '/lochportal/extJS/resources/themes/images/access/window/edit.gif', // Use a URL in the icon config
tooltip: 'Sell stock',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
//alert("Sell " + rec.get('id'));
updateUsers(rec.get('id'));
}
}]
}]
})]
});
var win = new Ext.Window({
layout:'fit',
closable: false,
resizable: true,
plain: true,
border: false,
items: [searchUsers]
});
win.show();
});
How to populate the grid after search button is clicked?
Thanks

Answer 1

Use bindStore() method of the grid to assign new or different store to grid which is already displayed. If you want to first show an empty grid - either filter all records out or assign store property to null initially.