Grid for Update Entries - extjs4

Question

I did the following code to list the searched items in the grid.
Ext.onReady(function(){
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var searchUsers = new Ext.FormPanel({
renderTo: "searchUsers",
frame: true,
title: 'Search Users',
bodyStyle: 'padding:5px',
width: 500,
items:[{
xtype:'textfield',
fieldLabel: 'Username',
name: 'userName'
}],
buttons:[
{
text:'Search',
formBind: true,
listeners: {
click: function(){
Ext.Ajax.request({
method:'GET',
url : url+'/lochweb/loch/users/getUser',
params : searchUsers.getForm().getValues(),
success : function(response){
console.log(response); //<--- the server response
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'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'userList',
autoLoad: true,
proxy: {
type: 'ajax',
url : url+'/lochweb/loch/users/getUser',
reader: {
type: 'json',
root: 'Users'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo: "searchUsers",
plugins: [rowEditing],
width: 900,
height: 300,
frame: true,
title: 'Users',
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'
}
}]
});
}
});
}
}
}
]
});
var win = new Ext.Window({
layout:'fit',
closable: false,
resizable: true,
plain: true,
border: false,
items: [searchUsers]
});
win.show();
});
How to Fit the grid inside the Search User window
Add an icon in the grid,so that by clicking on that icon the values from the
grid must be populated to entry form for update.

Answer 1

Here with your code, I've found something:
Use renderTo: "searchUsers" for both FormPanel and the Grid: You add the FormPanel to the window, so this config should not exist (Please refer to renderTo document). So remove them.
Use frame: true for both FormPanel and the Grid: There you have the window as container, so the Form and Grid have been framed inside. So remove them.
You dynamically add the Grid on searching: I recommend you create the result Grid as a separate component (not inside success's result) and specify both Form and Grid as items' components of window. You still can config the Grid with hidden. When Ajax is successful, you can fill the Grid with data returned and show it.
"add an icon in the grid": You can specify a new column in columns of the Grid and use renderer config of grid panel to show the button. For example:
renderer: function(v) {
return "<input type='button'.../>";
}
Finally, you can catch the itemclick event of the grid to know if the column of the clicked cell is the cell which contains the button, the entry will be populated to somewhere you want. Don't forget to specify the grid's Selection model as cellmodel