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

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);

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



<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">
<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%">
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..

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

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.

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

I must verify my source code...

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}">
and script call like this

var tmpval = Ext.getDom( Ext.get('sample_div') ).innerHTML;
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}">
and I changed to

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

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