PDA

View Full Version : [Solved][2.0b1] Updating form fields



GrF
22 Oct 2007, 4:53 AM
I have an Ext.Window with a formPanel that pops up on a grid's celldblclick event and loads data via an ajax call to populate form fields. It works for the first time, but when I close the window and double-click another user (row) in the grid the window pops-up and I know it knows id of the user whose date it should have in form fields, but the values of the form remain unchanged. What should I do to make the fields 'refresh' themselves inside the window?
Here's the relevant code:


var form = new Ext.form.FormPanel({
baseCls: 'x-plain',
labelWidth: 55,
frame : true,
bodyStyle: 'padding:5px 5px 0',
width : 600,
id : 'user-form',
url:'save-form.php',
items : [{
layout : 'column',
items : [{
defaultType: 'textfield',
columnWidth :.7,
border : false,
layout : 'form',
items : [{
fieldLabel : 'Login',
id : 'userFormLogin',
name : 'login',
//value : data.login,
disabled : true,
anchor : '95%'
},{
fieldLabel : 'Imie',
id : 'userFormFname',
name : 'fname',
//value : data.fname,
disabled : false,
anchor : '95%'
},{
fieldLabel : 'Nazwisko',
id : 'userFormLname',
name : 'lname',
//value : data.lname,
disabled : false,
anchor : '95%'
},{
fieldLabel : 'Klasa',
id : 'userFormCname',
name : 'cname',
//value : data.cname,
disabled : false,
anchor : '95%'
}]
},{
xtype : 'fieldset',
columnWidth :.3,
defaults : { border : false },
layout : 'form',
border : false,
id : 'photo',
name : 'photo',
anchor : '95%'
}]
},{
xtype : 'tabpanel',
plain : true,
activeTab : 0,
heigth : 230,
items : [{
title : 'Kontakt',
layout : 'form',
defaultType : 'textfield'
},{
title : 'Klasy',
layout : 'form',
defaultType : 'textfield'
},{
title : 'Grupy specjalne',
layout : 'form',
defaultType : 'textfield'
}]
}]
});

function formUpdate()
{
// Get underlying form from formPanel
var f = form.getForm();
// Login
f.setValues({
userFormLogin : data.login,
// First name
userFormFname : data.fname,
// Last name
userFormLname : data.lname,
// Class
userFormCname : data.cname});
f.render();
}

if(!dialog){
dialog = new Ext.Window({
el : 'userEditDialog',
id : 'userEditor',
name : 'userEditor',
width: 600,
height: 400,
layout : 'fit',
modal: true,
shadow: true,
animateTarget : 'door',
closeAction : 'hide',
syncHeightBeforeShow : false,
resizable : true,
items : form,
buttons: [{
text: 'Send',
id : 'sendButton'
},{
text: 'Cancel',
id : 'cancelButton',
handler : function(){
dialog.hide();
}
}]
});
dialog.on('beforeshow',formUpdate);
}

dialog.setTitle('Edycja uzytkownika ' + data.login)
dialog.show();

It's all inside an Ext.Ajax.request.success and I'm sure data keeps good values. It's just the window/formPanel that doesn't get updated.

Animal
22 Oct 2007, 4:56 AM
Where is the variable "data" being set?

GrF
22 Oct 2007, 5:05 AM
userEditor = function(grid, rowIndex, columnIndex, event){
Ext.Ajax.request({
url : "/auth/input/getuserdata",
params : { id : ds.getAt(rowIndex).id},
method : 'GET',
success : function(result, request){

var data = Ext.decode(result.responseText);
/* Some function I will need later, but they dont modify data */
var form = new Ext.form.FormPanel({
/* Rest as above */

Update : I did more FireDebugging (deFireBugging? :D) and it turned out data is NOT being updated, although I believe it should be (grid calls userEditor) which calls ajax request. OH, and dialog.setTitle('Edycja uzytkownika ' + data.login) set GOOD title...

Animal
22 Oct 2007, 5:17 AM
data is local.It's no good posting unconnected snippets.

GrF
22 Oct 2007, 5:26 AM
Well, I just didn't want to post whole 247-line-long script 'cos I thought noone would bother to read it.
Anyway, you helped me - when you wrote that data was local I triple-checked and found one 'var' statement too much (i had 'var data' in Ext.onReady scope and 'var data' where you saw it). Thanks.