PDA

View Full Version : Populate form in popup window. Form doesn't recieve data on 'load'



woffie
2 May 2010, 1:09 PM
Hi!

I've been looking around for a solution a couple of days and tried numberous different options from the documentation. I have a problem, which probably is very easy, but I haven't been able to find my error.

I have a grid where some members (participants) is shown. I am able, by a click on "add" to add new members without any issues. To do this, I create a window for each click on 'add' where a formpanel is loaded.
I have an equal formpanel for the 'update' action.
That is: two buttons (add/update), two forms (addForm/editForm)


var addForm = new Ext.FormPanel({...
var editForm = new Ext.FormPanel({...

The two forms is exactly the same, should I reuse them instead maybe...?! However, not my issue at the moment unless my problem occurs because of similar textfield names...

The goal is to select a row in the grid and when clicking the "update"-button I want to load a window, with the form editForm and the selected participant inside this form. (maybe the form can popup without the window?)

The problem is: the participant doesn't load into the form. The direct call fires and data is returned (by a direct store)

I know all calls are asynchronous and have been trying to take this into account but maybe I'm missing something. I believe it has something to do with which form that should load the data etc but can't figure out the solution...

I would be happy to find out what I'm doing wrong, or if you can point me to a previous similar issue. If my whole idea is wrong, please point me in the right direction.
All other opinions is also welcome to help me become a better extjs-developer.

addForm


var addForm = new Ext.FormPanel({
frame:true,
floating: false,
defaultType:'textfield',
monitorValid: true,
labelWidth: 140,
items: [
{
fieldLabel: 'Firstname',
name: 'first', id:'frmfirst',
msgTarget: 'side',
allowBlank: false, minLength: 2, maxLength: 100
},
{
fieldLabel: 'Lastname',
msgTarget: 'side',
name: 'last',id:'frmlast',
allowBlank: false, minLength: 2, maxLength: 100
}
],
buttons:[{
text:'Submit!',
formBind: true,
handler:function(){
addForm.getForm().submit({
//method:'POST',
waitTitle:'Connecting',
waitMsg:'Sending data...',
url:'../formhandler.php',
success:function(form, action){
// reset forms
Ext.getCmp('frmfirst').reset(); Ext.getCmp('frmfirst').focus(true, true);
Ext.getCmp('frmlast').reset();

listStoreDirect.load({
params: { start: 0, limit: 100, sort: 'pid', dir: 'DESC' }
});
},
failure:function(form, action){
if(action.failureType == 'server'){
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Validation error', obj.msg);
} else {
Ext.Msg.alert('Error!', 'Server error');
}
}
});
}
}]
});
editForm


var editForm = new Ext.FormPanel({
frame:true,
floating: false,
defaultType:'textfield',
monitorValid: true,
labelWidth: 140,
api: {
load: Dx.Participant.read,
submit: Dx.Participant.update
},
paramOrder: ['pid'],
items: [{
fieldLabel: 'Firstname',
name: 'first',
msgTarget: 'side',
allowBlank: false, minLength: 2, maxLength: 100
},{
fieldLabel: 'Lastname',
msgTarget: 'side',
name: 'last',
allowBlank: false, minLength: 2, maxLength: 100
}
],
buttons:[{
text:'Submit',
formBind: true,
handler:function(){
addForm.getForm().submit({
waitTitle:'Connecting',
waitMsg:'Sending data...',
url:'../formhandler.php',
success:function(form, action){
//...same as above
},
failure:function(form, action){
//...same as above
}
});
}
}]
});


Grid (it is in here i want to load the window-with-form -- or similar)


var participantgrid;
participantgrid = new Ext.grid.GridPanel({
xtype: 'grid',
title: 'Participants',
store: listStoreDirect,
stripeRows: true,
layout: 'fit',
loadMask: false,
hideHeaders: false,
columnLines: false,
viewConfig: { forceFit:true },
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
columns: [
{
xtype: 'numbercolumn',
header: 'ID',
format: '0',
sortable: true,
resizable: true,
width: 40,
dataIndex: 'pid',
hidden: true,
filter: {}
},{
xtype: 'gridcolumn',
header: 'Firstname',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'first',
filter: {}
},{
xtype: 'gridcolumn',
header: 'Lastname',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'last',
filter: {}
}],
plugins: [filterRow],
bbar: new Ext.PagingToolbar({
pageSize: 100,
store: listStoreDirect,
displayInfo: true,
prependButtons: true,
displayMsg: 'Showing posts {0} - {1} of {2}',
emptyMsg: "Nothing to show"
}),
tbar: {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'Add new participant',
handler: function(){
var win = new Ext.Window({
layout:'fit',
width:400,
title: 'Add Participant',
height:480,
closeAction:'hide',
closable: true,
border: false,
items: addForm
}).show();

}
},
{
xtype: 'button',
text: 'Update participant',
handler: function()
{
var m = participantgrid.getSelectionModel().getSelections();
if (m.length>0)
{
var win = new Ext.Window({
layout:'fit',
width:400, height:480,
title: 'Update participant',
closeAction: 'close',
closable: true,
border: false,
items: editForm
}).show();

// win.on('afterrender', function()
// {
// // editForm.getForm().load({
// // params: { pid: m[0].get('pid') },
// // waitMsg:'Loading'
// // });
// console.log('loaded'+m[0].get('pid'));
// });

editForm.on('afterrender', editForm.getForm().load({
params: { pid: m[0].get('pid') },
waitMsg:'Loading'
})); // THIS WORKS -- however, the data never reaches the editForm

editForm.on('afterrender', console.log(m[0].get('pid')));
editForm.on('afterrender', Ext.getCmp('frmfirst').setValue('test')); // doesn't work
}
}
}]
}
});
I'm using ExtJS 3.1.0, with a Direct Store. The load-action works as it should but leaves the form empty.

Returned data from Direct call


{
"type": "rpc",
"tid": 3,
"action": "Participant",
"method": "read",
"result": {
"success": true,
"data": [{
"pid": "28790",
"first": "Charlie",
"last": "Chaplin",
}]
}
}


I will post the final code in this post as soon as my issue is solved.
Thanks for any help in advance