load data from grid row into (pop up) form for editing
- by user1495457
I read in Ext JS in Action ( by J. Garcia) that if we have an instance of Ext.data.Record, we can use the form's loadRecord method to set the form's values. However, he does not give a working example of this (in the example that he uses data is loaded into a form through a file called data.php). I have searched many forums and found the following entry helpful as it gave me an idea on how to solve my problem by using form's loadRecord method:
load data from grid to form
Now the code for my store and grid is as follows:
var userstore = Ext.create('Ext.data.Store', {
storeId: 'viewUsersStore',
model: 'Configs',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/user/getuserviewdata.castle',
reader: {
type: 'json',
root: 'users'
},
listeners: {
exception: function (proxy, response, operation, eOpts) {
Ext.MessageBox.alert("Error", "Session has timed-out. Please re-login and try again.");
}
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
id: 'viewUsersGrid',
title: 'List of all users',
store: Ext.data.StoreManager.lookup('viewUsersStore'),
columns: [
{ header: 'Username', dataIndex: 'username' },
{ header: 'Full Name', dataIndex: 'fullName' },
{ header: 'Company', dataIndex: 'companyName' },
{ header: 'Latest Time Login', dataIndex: 'lastLogin' },
{ header: 'Current Status', dataIndex: 'status' },
{ header: 'Edit',
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
width: 50,
items: [{
icon: '../../../Content/ext/img/icons/fam/user_edit.png',
tooltip: 'Edit user',
handler: function (grid, rowIndex, colIndex) {
var rec = userstore.getAt(rowIndex);
alert("Edit " + rec.get('username')+ "?");
EditUser(rec.get('id'));
}
}]
},
]
});
function EditUser(id) {
//I think I need to have this code here - I don't think it's complete/correct though
var formpanel = Ext.getCmp('CreateUserForm');
formpanel.getForm().loadRecord(rec);
}
'CreateUserForm' is the ID of a form that already exists and which should appear when user clicks on Edit icon. That pop-up form should then automatically be populated with the correct data from the grid row.
However my code is not working. I get an error at the line 'formpanel.getForm().loadRecord(rec)' - it says 'Microsoft JScript runtime error: 'undefined' is null or not an object'.
Any tips on how to solve this?
