PDA

View Full Version : Rebuild dynamic form after submission.



Eutychus
4 May 2010, 4:34 AM
Hello,

I have a dynamic form (dynamic list of checkboxes so as an additional textarea).

After Submission I'd like to rebuild this form (remove all checkboxes and reload them via json request).

What ist the prefered way.


....
listeners: {
actioncomplete: function (form, action) {

switch ( action.type ) {

case 'load':
buildObjectsForm(objectsForm, action.result.data);
break;

case 'submit':
loadObjects(objectsForm, showId);
break;

}
....



function loadObjects(objectsForm, showId) {
objectsForm.getForm().load({
url: './service.php',
method: 'get',
params: { m: 'surveys', sc: 'loadobjects', id: showId },
waitMsg: 'loading objects ...'
});
}


function buildObjectsForm(objectsForm, data) {
objectsForm.removeAll(true);

var items = [];
for ( var idx = 0; idx < data.length; idx++ ) {
items[items.length] = { boxLabel: data[idx].name, value: data[idx].id, name: 'objects[' + data[idx].id + ']', checked: true };
}

var objects = new Ext.form.CheckboxGroup({
fieldLabel: 'Existing objects',
autoScroll: true,
height: 330,
items: items,
name: 'xobjects',
id: 'txtObjects',
allowBlank: false,
itemCls: 'x-check-group-alt',
defaults: {width: 130},
columns: 1
});
objectsForm.add(objects);

var newobjects = new Ext.form.TextArea ({
fieldLabel: 'New Objects',
name: 'newobjects',
id: 'txtNewObjects',
allowBlank: true
});
objectsForm.add(newobjects);
}

does not really work and results in an empty formular screen.

TIA
Eutychus

4 May 2010, 5:15 AM
you are missing the objectsForm.doLayout();

Eutychus
4 May 2010, 7:30 AM
That's it! Wow ... Thank u!!

volperubbia
9 Jun 2010, 12:45 AM
Hi,
I think i have a similar problem.
On click on button I open a Ext.Window popup with a Ext.FormPanel.
In this panel, I want populate dinamicly a Ext.form.CheckboxGroup.

Here is the function to return check box items:



function myItems(Key) {
var count = 0;
var aItem = new Array();
var conn = new Ext.data.Connection();
conn.request({
url: "/MyUrl",
params: { ID: Key },
success: function(response) {
var data = Ext.util.JSON.decode(response.responseText)
for (var i = 0; i < data.totalRecords; i++) {
aItem[i] = { boxLabel: data.records[i].Description,
name: data.records[i].ID,
disabled: (data.records[i].Enabled != 0)};
count = count + 1;
}
//return aItem; chk.items = aItem;
alert('in success ' + count);
},
failure: function() {
Ext.Msg.alert('Attention', 'Unable to load ...');
}
});
if (count == 0) {
aItem = [{ boxLabel: 'Not available element, name: '', disabled: true}];
};
return aItem;
}


Now i add a Ext.form.CheckboxGroup to form:



var chkPoint = new Ext.form.CheckboxGroup({
columns: 1,
layout: 'hbox',
defaults: { autoScroll: true, autoHeight: false },
items: myItems('test 1')
});

alert('break');


The problem is that alert('in success ' + count) appair after alert('break').
The CheckboxGroup is in the form, but have only a default element,
becouse success: function(response) is called after.

Any idea?

Tks.