Rendering a form dynamically

[francescoNemesi]

Hello everyone,

I have a form that contains 2 numeric fields, the form is contained in a (Ext) Dialog. The dialog is displayed on a dropnode event on a tree to ask the user for the numeric information. Depending on what kind of node is dropped, the form should contain only one of the 2 fields, or both. This means I need to render the form more than once, ie every time a node is dropped.

How to do this? If I render the form more than once, the fields keep adding themselves to the form, the form.remove method does not remove the markup. A solution could be to clear the container div from its inner html and then re-render... any other ideas/solutions?

Thanks,
Francesco

HTML:


<div id="quote-pct-reclassify-dlg" style="visibility:hidden;position:absolute;top:0px;">
<div class="x-dlg-hd">Riclassificazione Quote</div>
<div class="x-dlg-bd">
<table border="0" cellspacing="10">
<tr>
<td>
<div id="form-ct">
</div>
</td>
</tr>
</table>
</div>
</div>


JS:


var quotesDialog;
var reclassForm;
var quotesNumberField;
var quotesPctField;

function reclassifyQuotesForm(droppedNode){

var nodeType = droppedNode.attributes.nodeType;

console.log("Drooped Node from reclassifyQuotesForm : "+droppedNode);
console.log("Drooped Node Type : "+nodeType);


if (!reclassForm){

quotesNumberField = new Ext.form.NumberField({
allowNegative : false,
fieldLabel: 'Numero Quote',
name: 'quotesNumber',
width:75,
allowBlank:false
});

quotesPctField = new Ext.form.NumberField({
allowNegative : false,
minValue : 0.1,
maxValue : 100,
validationDelay : 10,
decimalSeparator : ",",
fieldLabel: "Percentuale Quote",
name: "quotesPct",
width:75
});

reclassForm = new Ext.form.Form({
labelWidth: 115, // label settings here cascade unless overridden
url:'quotes.do'
});

reclassForm.add(quotesPctField);
reclassForm.add(quotesNumberField);
}
// reclassForm.addButton('Ok');
// reclassForm.addButton('Cancel');

/*
if (nodeType == "MP" || nodeType == "PR"){
reclassForm.add(quotesNumberField);
}
*/

if (nodeType == "MC"){
reclassForm.remove(quotesNumberField);
reclassForm.render('form-ct');
}
else {
reclassForm.add(quotesNumberField);
reclassForm.render('form-ct');
}
}

function showQuotesDialog(droppedNode){

if(!quotesDialog){ // lazy initialize the dialog and only create it once

quotesDialog = new Ext.BasicDialog("quote-pct-reclassify-dlg", {
autoTabs:false,
modal : true,
width:245,
height:145,
shadow:true,
minWidth:245,
minHeight:145,
proxyDrag: true
});
quotesDialog.addKeyListener(27, quotesDialog.hide, quotesDialog);
quotesDialog.addButton('Ok', quotesDialog.hide, quotesDialog);
quotesDialog.addButton('Cancel', quotesDialog.hide, quotesDialog);

}

if(droppedNode.attributes.nodeType != "DS"){

reclassifyQuotesForm(droppedNode);
quotesDialog.show();

}

}

function askForQuotes(droppedNode){
showQuotesDialog(droppedNode);
}

[jay@moduscreate.com]

I render my forms and dialogs when they dialog are demanded. No need to re-render. If you require re-rendering, destroy the form, set the form var to null, then re-render.

[francescoNemesi]

Hi,

thanks for your reply. How do you actually destroy a form? No destroy method is implemented for Form. Also, setting the form var to null does not clear the previously generated html content of the form container div.

Thanks again,
Francesco

[end-user]

This might help

http://extjs.com/forum/showthread.php?t=9711