PDA

View Full Version : Problem Using XTemplate With Internet Explorer



NStaub
8 May 2009, 3:06 PM
Hello,

Long time reader, first time poster so please go easy on me....:">

The problem I am currently facing seems to be related to the <tpl> tags used in defining the XTemplate for a grid rowexpander... This problem is isolated to Internet Explorer (All Versions) and the code currently in place works great in all other tested browsers.

Basically, I have a grid with a rowexpander plugin for the template for the rowexpander I am defining it as follows:




var expander = new Ext.grid.RowExpander({
tpl : new Ext.XTemplate(
'<div id="template">',
'<tpl if="this.isResource(class) == false">',
'<table>',
'<tr><td><b>NAME:</b></td><td>{name}</td></tr>',
'<tr><td><b>ID:</b></td><td>{id}</td></tr>',
'<tr><td><b>TYPE:</b></td><td>{type}</td></tr>',
'<tr><td><b>DATE:</b></td><td>{date}</td></tr>',
'<tr><td><b>URL:</b></td><td>{url}</td></tr>',
'<tr><td><b>COMMENTS:</b></td><td>{comments}</td></tr>',
'<tr><td><b>DESCRIPTION:</b></td><td>{description}</td></tr>',
'</table></tpl>',
'<tpl if="this.isResource(class)">',
'<table>',
'<tr><td><b>TITLE:</b></td><td>{title}</td></tr>',
'<tr><td><b>ID:</b></td><td>{id}</td></tr>',
'<tr><td><b>TYPE:</b></td><td>{type}</td></tr>',
'<tr><td><b>SUBJECT:</b></td><td>{subject}</td></tr>',
'<tr><td><b>DATE:</b></td><td>{date}</td></tr>',
'<tr><td><b>URL:</b></td><td>{url}</td></tr>',
'<tr><td><b>PUBLISHER:</b></td><td>{publisher}</td></tr>',
'<tr><td><b>CREATOR:</b></td><td>{creator}</td></tr>',
'<tr><td><b>SOURCE:</b></td><td>{source}</td></tr>',
'<tr><td><b>CONTRIBUTOR:</b></td><td>{contributor}</td></tr>',
'<tr><td><b>DESCRIPTION:</b></td><td>{description}</td></tr>',
'</table></tpl>',
'</div>', {
isResource: function (class) {
return type == 'com.foo.bar.Resource';
}
})
});


This template is used by the rowexpander which is called by the grid. Everything works perfectly in FF but IE throws a generic "Syntax Error" on page load. If I use a regular template, everything works fine in IE as well.

So my question is...Is this XTemplate properly formatted to be used in IE? Or how can I get IE to understand the <tpl> tags as I think these are what is causing IE to choke on it.

The reason I need the XTemplate over the standard Template is because I need it to change dynamically based on 'class' which is a field passed from my json reader.

Any help would be greatly appreciated...

Thanks in advance...

aconran
9 May 2009, 8:46 AM
Hrm... I don't see anything wrong with your particular XTemplate. The browser will never encounter the actual tpl tags unless you are using the static Ext.XTemplate.from method to pull from markup.


One note, make sure you change your id of template to a css class, this way you can ensure that there are not duplicate id's.

Have you tried debugging with Visual Web Developer or MS Script Debugger?

NStaub
9 May 2009, 1:37 PM
AC,

Thanks for the quick reply.

The template is simply assigned to the expander as you can see, then the expander is placed within a grid and them template is populated with the grid load. If I change it from XTemplate to Template it will render in IE and just ignore the tpl tags rendering both tpl's for each record. If I leave it as an XTemplate and remove the tpl tags it will do the exact same thing.

I've tried nearly every IE debugger I can find, without success. With the template in there the way it is shown the the previous post, a generic popup window will display that simply says "Syntax Error" and the parent window that holds the grid and everything else will not display. If I modify the template as mentioned above the window displays and all functionality is there with the exception of the template not performing dynamically.

In FF everything works fine all the time... Argh IE is really playing on my patience.:-/

chesstrix
2 Jun 2009, 1:45 AM
Hi NStaub,

did you manage to solve this. I have what could be the same issue only I get no error and absolutley nothing rendered in IE7.

All is well with my XTemplate in FF.

pratik016
28 Apr 2011, 12:54 AM
I have problem while using Xtemplate. my code is below :


<div id="message-preview-tpl" style="display:none;">
<tpl if="display_received"><div class="post-date"><?php echo $this->translate->_('Received');?>: {date}</div></tpl>
</div>

and in JS


var tpl = Ext.XTemplate.from('message-preview-tpl', {
compiled:true,
getBody : function(v, all){
return Ext.util.Format.stripScripts(v || all.description);
}
});

tpl.overwrite(my_panel.body, data); // my_panel - is my panel where template rendere and data has my resule...


here if condition is not executed in IE, ff is working correct.