View Full Version : Loading data into a (pop-up) form

9 Jul 2012, 5:53 AM
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: http://stackoverflow.com/questions/10914803/load-data-from-grid-to-form (http://www.sencha.com/exchweb/bin/redir.asp?URL=http://stackoverflow.com/questions/10914803/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')+ "?");

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');


'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'.

Does anyone have any idea what I am doing wrong? I am new to Ext JS and programming in general. Thanks for your help!

9 Jul 2012, 2:00 PM
Please see the following example:


9 Jul 2012, 10:02 PM

Try this:-

// Edit Button Handler

handler: function (grid, rowIndex, colIndex){
var rec = userstore.getAt(rowIndex);

function EditUser(rec) {
var formpanel = Ext.getCmp('CreateUserForm');

*Also fields in your form should have same name/hiddenName(combo) as matching as fields in record 'rec'

9 Jul 2012, 11:28 PM
I tried this but still get an error at the line 'formpanel.getForm().loadRecord(rec)' - it says 'Microsoft JScript runtime error: 'undefined' is null or not an object'. I tried alert(formpanel) upon someone's advice and founf out that the problem lies with Ext.getCmp('CreateUserForm' ). 'CreateUserForm' is the ID of a form in a file called Edit.vm and I am calling it from View.vm (I am using Visual Web Developer 2010 Express and Castle MonoRail (MVC)). Is that the cause of the problem, i.e. that the form being referred to is in another file? If so, how do I refer to this form?

10 Jul 2012, 8:15 AM
So CreateUserForm is not a form created with ExtJS?


11 Jul 2012, 10:46 PM
CreateUserForm is the ID of a form within a window which is in a file called Edit.vm. I am trying to query the form from within View.vm which is a separate file but in the same folder as Edit.vm (both Edit.vm and View.vm are in a folder called 'user'). I don't think the form is already created when I try to query it but I am not sure. I think (and I was advised) that it is better to simply create a new 'EditUser' form within the EditUser function and then load the data from the grid row into that form. Like so: function EditUser(rec) { var formpanel = Ext.create('your_class_name'); formpanel.getForm().loadRecord(rec); }