PDA

View Full Version : how to destroy dynamically generated and rendered form?



DrKnate
26 Apr 2007, 9:30 AM
So what i am trying to do is this - i have a wizard like interface - series of forms with the fields of the next form determined by the values found in the previous form.

A little code then i will explain the problem....



initOptionsForm : function(){
optionsForm = new Ext.form.Form({
labelAlign: 'right',
labelWidth: 75,
url: 'PageBuilder',
baseParams: {
action: 'optionsFormSubmit'
}
});

....
OTHER FIELDS
....

var manualCombo = new Ext.form.ComboBox({
fieldLabel: 'Manual',
id:'manual',
name:'manual',
valueField:'manual',
store: manualDS,
displayField:'manual',
typeAhead: true,
triggerAction: 'all',
emptyText:'Select a manual...',
selectOnFocus:true,
width:250,
allowBlank:false,
forceSelection:true
});

manualCombo.on('select', function(){
filesDS.load(
{params: 'manual=' + manualCombo.getValue()});
});

optionsForm.fieldset(
{legend:'Manual Options'},
manualCombo
[OTHER FIELDS HERE]
);

optionsForm.addButton('Next', function(){
optionsForm.submit({
waitMsg:'Please Wait...',
success:Controller.optionsFormSuccess,
failure:Controller.genericFailure,
scope:Controller
});
}, optionsForm);

optionsForm.render('OptionsFormHolder');




optionsFormSuccess : function(f,a){
previousPanel = 'OptionsFormPanel';
this.initSubmissionForm();
pageLayout.getRegion('center').showPanel('SubmissionSelectionFormPanel');
}


initSubmissionForm : function(){
submissionForm = null;
submissionForm = new Ext.form.Form({
timeout:3600,
labelAlign: 'right',
labelWidth: 75,
url: 'publish'
});

submissionForm.fieldset(
{legend:'Files to Submit',
labelSeparator:' '}
);

filesDS.clearFilter();
filesDS.filter('ableToSubmit', 'true');

filesDS.each(function(record){
submissionForm.add(new Ext.form.Checkbox({
fieldLabel: record.get('image'),
boxLabel: record.get('fileName'),
name:record.get('fieldName'),
id:record.get('fieldName'),
checked:true
}));
});
submissionForm.end();//close files fieldset

submissionForm.addButton('Previous', function(){
pageLayout.getRegion('center').showPanel(previousPanel);
Ext.get('SubmissionFormHolder').dom.innerHTML = '';
}, submissionForm);

submissionForm.addButton('Submit', function(){
[SUBMIT FILES]
}, submissionForm);

submissionForm.render('SubmissionFormHolder');
}


The problem i have is this:

optionsform loads
pick a manual (manual A ), which loads the filesDS (files for manual A )
click next - init and show submissionform - the files from manual A are shown as checkboxes
click previous - return to optionsform
pick a different manual (manual B ), which sets the filesDS (files for manual B )
click next - init and show submissionform - the files from manual A are shown as checkboxes

the second form does not display the new checkboxes that correspond to the filesDS

i have tried getting the elements of the form and removing them, that did not work...

any idea on how i can destroy the second form and have it be recreated everytime??

DrKnate
26 Apr 2007, 10:09 AM
ok i have narrowed down the problem a bit - it appears to be a problem with the store




alert("before filter - size - " + filesDS.getTotalCount());

filesDS.clearFilter();
filesDS.filter('ableToSubmit', 'true');
alert("after filter - size - " + filesDS.getTotalCount());

filesDS.each(function(record){
alert(record.get('fileName'));
submissionForm.add(new Ext.form.Checkbox({
fieldLabel: record.get('image'),
boxLabel: record.get('fileName'),
name:record.get('fieldName'),
id:record.get('fieldName'),
checked:true
}));
});

alert("after each - size - " + filesDS.getTotalCount());


using these alert i have figured out that somehow the records of the store that were initially loaded are always accessed during the .each loop

the counts before and after the loop indicate that the store is always correct outside of the .each loop

so basically the data present in the store is what was initially loaded, regardless if .load or .reload has been called since then - also calling .removeAll() and then loading has the same effect

tryanDLS
26 Apr 2007, 11:26 AM
Are you sure the filter is actually doing anything? Set BPs before and after the filter call and look at store.data - is it changing?

DrKnate
26 Apr 2007, 1:43 PM
thanks for drawing my attention to the filter


think i fixed it - for some reason the call to the filter was pulling up the old data

i am now doing this which works fine


filesDS.each(function(record){
if(record.get('ableToSubmit')){
submissionForm.add(new Ext.form.Checkbox({
fieldLabel: record.get('image'),
boxLabel: record.get('fileName'),
name:record.get('fieldName'),
id:record.get('fieldName'),
checked:true
}));
}
});

maybe the filter was having a problem with ableToSubmit being a boolean value??

thanks for the help....