PDA

View Full Version : I have a problem whlie using template with dialog.



lyg73
22 May 2007, 1:33 AM
var dlg = null;
var btnSubmit = null;
var btnCancel = null;
showDialogForm = function(data, title) {
if( dlg == null ) {
dlg = new Ext.BasicDialog("input-dlg", {
height: 150,
width: 350,
collapsible: false,modal: true,shadow: true,resizable : false
});
btnSubmit = dlg.addButton('OK', dlgSubmit, dlg);
btnCancel = dlg.addButton('Cancel', dlg.hide, dlg);
}
dlg.setTitle(title);
dlg.setDefaultButton(btnSubmit);

var dlgTemplate = new Ext.Template.from('input-dlg-template');
dlgTemplate.compile();
dlg.body.update (dlgTemplate.applyTemplate(data));

dlg.show();

}


<div id="input-dlg" style="visibility:hidden;position:absolute;top:0px;"></div>
<div id="input-dlg-template" style="visibility:hidden;position:absolute;top:0px;">
<form id="form1" method="get" onsubmit="return false">
<input type="hidden" name="num" value="{num}">
<input type="hidden" name="mode" value="{mode}">
<table class="dlg-field-table">
<tr>
<td width=100 class="dlg-field-lable-td"><span class="dlg-field-lable">E-Mail Address</span></td>
<td class="dlg-field-td"><input class="dlg-field" type="text" size="30" value="{email}" name="new_forwarding" style="width:100%">
</td>
</tr>
</table>
</form>
</div>
the source code is above...

If i called like following

var data = {mode:'add', num:'', email:''};
showDialogForm(data, 'Add');

Then the dialog box apear like invalid.gif of attachement.

invalid.gif file is a image that input field has "name=new_forwarding"

I expected valid.gif of attachment..

I'm sorry for my poor English..

How can I do like valid.gif....

Help me please..

P.S
The dialog box apear properly in FF2.
But "name=new_forwarding" is filled in IE6...

tryanDLS
22 May 2007, 9:14 AM
Have you verified that your template is correctly loaded and the data applied to it. I tried this and it didn't appear that any of the values were getting substituted, including the hidden values in FF.

lyg73
22 May 2007, 7:03 PM
Thank you for your advice.

I must verify my source code...

lyg73
22 May 2007, 8:59 PM
the code of Ext.Template.from is


Ext.Template.from = function(el){
el = Ext.getDom(el);
return new Ext.Template(el.value || el.innerHTML);
};
if some html code is in div like followed



<div id=sample_div>
<input type="text" name="sample" value="{sample_value}">
</div>
and script call like this



var tmpval = Ext.getDom( Ext.get('sample_div') ).innerHTML;
alert(tmpval);
then the value of tmpval in IE is


<INPUT value={sample_value} name=sample>
but the value of tmpval in FF is


<input name="sample" value="{sampe_value}" type-"text">
so if sample_value of template variable is assigned "" (empty string).
then the tmpval is changed like this


<INPUT value= name=sample>
so the text input field of form has name=sample as value

and if sample_value of template variable is assigned "this is a value"
then the tmpval is changed like this


<INPUT value=this is a value name=sample>
then the value of input field is "this" only.

So I change the container of the template to textarea

and I fixed the problem..

The original template code is


<div id=sample_div>
<input type="text" name="sample" value="{sample_value}">
</div>
and I changed to


<textarea id=sample_div>
<input type="text" name="sample" value="{sample_value}">
</textarea>


in Ext.Template.from method call el.innerHTML on DIV call and el.value on textarea ..