PDA

View Full Version : Loading an Edit User form with data from database



anitacynax
20 Jul 2012, 3:54 AM
I have a grid which displays a list of members. The grid has an actioncolumn called Edit with an icon. If a user clicks on the Edit icon, the window is redirected to another page which contains the Edit User 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: 'ID', dataIndex: 'id', hidden: true},
{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',
handler: function (grid, rowIndex, colIndex){
var rec = userstore.getAt(rowIndex);
alert("Edit " + rec.get('username')+ "?");
EditUser(rec.get('id'));
}
}]
}
]
});
function EditUser(id) {

window.location = "/user/index.castle";

}



When a user clicks the Edit icon, function EditUser(id) gets called. In that function, window.location redirects the user to the Edit User form (that's what the url stands for). Now my problem is: how to load member data from the database into the Edit User form? In other words, if the user clicks on the Edit icon, he/she should be redirected to the Edit User form/window which should then be (automatically) loaded with member data (i.e. Username, Fullname, etc.) from the database (each member has a unique id). I am not using php but Ext JS and Castle Monorail (MVC). I tried using loadRecord(rec) and that works but the probem is that the grid record does not contain all the data fields that occur in the Edit User form and so the data needs to be loaded from the database and not the record. For example, the Edit User form has a checkboxgroup called Permissions which is left out in the grid. Also, the edited member data needs to be saved back to the database. Anyone have any tips as to how to go about this?

friend
20 Jul 2012, 4:43 AM
Part of the problem is that you're setting window.location() in order to navigate to the user edit page. Ext.form.Panel supports Ajax loading of data (see the example from the API docs here (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.form.action.Load)), where you can pass the target employee's ID via the params of the Ajax load to tell the server side what data is to be returned for editing the user.

I generally open editing forms in a modal window on top of the parent grid, where this forces the user to finish their edits and submit/cancel before continuing on their merry way.

anitacynax
20 Jul 2012, 5:24 AM
Part of the problem is that you're setting window.location() in order to navigate to the user edit page. Ext.form.Panel supports Ajax loading of data (see the example from the API docs here (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.action.Load)), where you can pass the target employee's ID via the params of the Ajax load to tell the server side what data is to be returned for editing the user.

I generally open editing forms in a modal window on top of the parent grid, where this forces the user to finish their edits and submit/cancel before continuing on their merry way.

Previously I had simply recreated an Edit User form in the function EditUser(id) and loaded data via loadRecord(rec). My supervisor, however, told me not to do it that way. So I used window.location() instead. Is there no way to load data for editing even when one uses window.location() in order to navigate to the user edit page?

scottmartin
20 Jul 2012, 7:43 AM
You will need to pass the id and load the record from the table. Same premise as when you get a link in an email that directs you to a user page with details. This would be safer than passing the info in the URL.

I would provide security key on this as well.. unique generated key that is passed and re-gen on load so that URL's are not allowed to load personal data with ?id=12

Scott.

anitacynax
23 Jul 2012, 4:06 AM
How exactly would I pass the id and load the record from the table ? I know how to use


var formpanel = Ext.getCmp('EditUserForm'); formpanel.getForm().loadRecord(rec);

but this does not load data from the database. Rather it loads record data from the grid, which has fewer fields than the database. I need the data to load from the database.

scottmartin
23 Jul 2012, 6:06 AM
You can make an ajax request to load the data from your database. This will give you the JSON to load it into the form.

Scott.

anitacynax
24 Jul 2012, 2:58 AM
Hi Scott,
Thanks for your response. I am familiar with Ajax requests in Sencha (I used it earlier to delete a user from the database) but I am not sure how to use it when it comes to editing a user and then saving the changes back to the database. Could you perhaps give me a working example?

scottmartin
24 Jul 2012, 6:57 AM
Have a look at several CRUD examples here.
http://www.sencha.com/forum/showthread.php?229457

The idea is:
Modify form, submit changes, server updates table, updated record is return to client.

Scott.

anitacynax
26 Jul 2012, 3:35 AM
Thanks Scott for your response. When I try to open the zip files (f185069.zip (http://www.sencha.com/forum/attachment.php?attachmentid=36970&d=1341851673) and
t6775-remote.zip (http://www.sencha.com/forum/attachment.php?attachmentid=36971&d=1341851674)) I get an error ('The compressed folder is invalid or damaged'). Also, I read http://www.sencha.com/learn/the-mvc-application-architecture/#!/guide/application_architecture-section-7. It was very helpful, thanks. But in my case, where I am redirecting the user to a the Edit User window using window.location = url when the user clicks on the Edit icon, how would I go about loading data into that window? Using Ext.Ajax.request to delete a user was simpler but this is a bit harder for me as I am a beginner to programming in general.

scottmartin
26 Jul 2012, 6:05 AM
I just opened each link .. perhaps another zip client?

Scott.

anitacynax
26 Jul 2012, 6:36 AM
Hi Scott, I will try another zip client. For now I have the following code to try and load the data into the form:


var formpanel = Ext.getCmp('EditUserForm');
formpanel.getForm().load({
url: '/user/edit.castle',
params: {id: id},
failure: function() {
Ext.Msg.alert('Error', 'Unable to load user data');
},
waitMsg: 'Retrieving user data',
waitTitle: 'Loading...'
});


The url ('/user/edit.castle') from which the data should be loaded contains the following Edit method:


public void Edit(int id)
{
User user = User.FindUser(id);
}



I know that in the Edit method there needs to be some code (JSON data packet) which maps the correct key value pairs needed to load data into Edit User form. I just don't know how to go about this. Any tips?

anitacynax
3 Aug 2012, 2:16 AM
Hi Scott, I don't mean to bug you but do you have any tips as to how I can proceed? I read Ext JS in Action where they show how to load data into a form using formpanel.getForm().load() but here data is loaded from a php file (the url is data.php) which contains a JSON object. I, however, am not using php.