PDA

View Full Version : Dynamically populating items via AJAX request in extended FormPanel



Marioario
10 Aug 2010, 7:14 AM
Hello Everyone,

I have worked hard to read through the forums for a solution to the issue I am having, but for some reason I'm still getting it wrong. I'm pretty sure that this is a scoping issue, but even careful use of Firebug has not illuminated my problem.

The server passes back a JSON string which is then decoded into a javascript array that I would like to be the items of the form. I think my issue is that the scope changes, i.e. what "this" is once the AJAX callback happens. Is there a simple fix to this?

Thanks in advance for all your patience dealing with us noobies.



Ext.form.Field.prototype.msgTarget = 'side';

Ext.ns('App');

App.Survey = Ext.extend(Ext.form.FormPanel, {
labelAlign: 'top',
labelWidth: 75,// label settings here cascade unless overridden
url: context_path + "/FormProcessor",
layout: 'form',
frame:true,
title: 'Survey',
bodyStyle:'padding: 0',
width: 600,
defaultType: 'textfield',
initComponent : function(){

this.items = this.buildForm();
this.buttons = this.buildUI();

App.Survey.superclass.initComponent.call(this);

},

buildForm : function(){

Ext.Ajax.request({
url: context_path + "/FormGeneratorJS",
params: { sid: 1 },
success: function(form, response){
var obj = Ext.util.JSON.decode(form.responseText);
items = Ext.util.JSON.decode(obj.js);
},
failure: function(form, response){
obj = Ext.util.JSON.decode(response.responseText);
Ext.Msg.alert('Error Generating Survey!', obj.errors.reason);
},
callback: function (request,success, response){
var obj = Ext.util.JSON.decode(response.responseText);
this.items = Ext.util.JSON.decode(obj.js);
this.doLayout();
}
});
}
});

Ext.reg('survey', App.Survey);

Marioario
10 Aug 2010, 9:46 AM
I managed to solve this as follows, though I really hope that someone can chime in with a better solution so that I dont need to keep track of the ID...



App.Survey = Ext.extend(Ext.form.FormPanel, {
labelAlign: 'top',
labelWidth: 75,// label settings here cascade unless overridden
url: context_path + "/FormProcessor",
layout: 'form',
frame:true,
title: 'Survey',
bodyStyle:'padding: 0',
width: 600,
defaultType: 'textfield',
initComponent : function(){

var formID = this.getId();
this.buildForm(formID);
this.buttons = this.buildUI();

App.Survey.superclass.initComponent.call(this);
},

buildForm : function(id){

Ext.Ajax.request({
url: context_path + "/FormGeneratorJS",
params: { sid: 1 },
success: function(form, response){
// var obj = Ext.util.JSON.decode(form.responseText);
// items = Ext.util.JSON.decode(obj.js);
},
failure: function(form, response){
obj = Ext.util.JSON.decode(response.responseText);
Ext.Msg.alert('Error Generating Survey!', obj.errors.reason);
},
callback: function (request,success, response){
var obj = Ext.util.JSON.decode(response.responseText);
var items = Ext.util.JSON.decode(obj.js);
var form = Ext.getCmp(id);
for (var i = 0; i<items.length; i++){
var y = Ext.ComponentMgr.create(items[i]);
form.add(y);
}
form.doLayout();
}
});
}
});

Ext.reg('survey', App.Survey);