PDA

View Full Version : Can I pass HTML to an XTemplate for rendering?



MikeB
5 May 2014, 8:31 AM
I don't believe this will work but figured I'd ask it anyway...
When passing data to an XTemplate, can I pass HTML and have that HTML rendered?
For example:


new Ext.XTemplate("<tpl>Hello {test}...</tpl>").apply({test: '<b>MikeB</b>'})

And I want to see:
Hello MikeB...
NOT
Hello <b>MikeB</b>...

Thanks

skirtle
5 May 2014, 9:13 AM
Why not just type that code into the console and see for yourself?

XTemplates do not HTML encode by default, so you should see the HTML. To add HTML encoding (the opposite of what you're trying to do) it'd be:


new Ext.XTemplate("<tpl>Hello {test:htmlEncode}...</tpl>").apply({test: '<b>MikeB</b>'})

MikeB
5 May 2014, 9:37 AM
Thanks for the suggestion skirtle, unfortunately that didn't work either. Here's a fiddle of what I tried (both prior to your suggestion and then including the htmlEncode), but I get the same results in both cases (which is seeing the HTML tags in the display)...



Ext.define("COMS.SiteCommonInfoDisplay" ,{
extend : "Ext.container.Container",
alias : "widget.SiteCommonInfoDisplay",
id:"SiteCommonInfoDisplay",


tpl : new Ext.XTemplate(
"<section>",
"<ul class=\"SelectedSiteCommonInstructions\">",
"<tpl for=\".\">",
"<li><h2>{Label:htmlEncode}</h2>",
"<div>{Details:htmlEncode}</div>",
"</li>",
"</tpl>",
"</ul>",
"</section>"
)
});


Ext.application({
name: 'Fiddle',
refs : [
{
ref : "SiteCommonInfoDisplay",
selector : "SiteCommonInfoDisplay"
}
],


launch: function() {
Ext.create('Ext.form.Panel', {
bodyPadding: 10,
width: 300,
title: 'Testing XTemplate HTML Render',
items: [{xtype : 'SiteCommonInfoDisplay' }],
renderTo: Ext.getBody()
});
var thePanel = Ext.getCmp("SiteCommonInfoDisplay");
// thePanel.update([{"Label" : "Test 1", "Details" : "This is a &lt;b&gt;special&lt;/b&gt; instruction"}]);
thePanel.update([{"Label" : "Test 1", "Details" : "This is a <b>special</b> instruction"}]);
}
});

skirtle
5 May 2014, 9:47 AM
As I explained, adding htmlEncode to your template is the opposite of what you're trying to achieve. Your desired behaviour is the default anyway.

Just get rid of the htmlEncode bits and it'll work fine.

MikeB
5 May 2014, 9:50 AM
Huh, you're right... Which is SO weird because in my original block of code (which I extracted from for the FIDDLE example) NOT having the htmlEncode in my template did NOT work. But in the FIDDLE example no htmlEncode DOES provide what I was expecting.

So that points to something else in my code which is screwing me up. :-?

Thanks skirtle!