[CLOSED]Template corrupt in FF3.6 using EXT 3.1.1 [Archive]

catapult

15 Feb 2010, 2:27 AM

Ext version tested:

Ext 3.1.1

Adapter used:

ext

css used:

only default ext-all.css

Browser versions tested against:

IE8 (Works fine)

FF3.6 (firebug 1.5.0 installed)

Safari 4.0.4(531.21.10) (Works fine)

Opera 10.10 (Works fine)

Google Chrome 4.0.249.89(38071) (Works fine)

Operating System:

WinXP Pro

Description:

FireFox does not show template in panel correctly. All other browsers are fine. Shows template twice with a slice of code between the two. Works correctly in all browsers using EXT 3.0.

Test Case:

<html>
<head>


<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>


<script type="text/javascript">

Ext.onReady(function(){
Ext.QuickTips.init();

var template = new Ext.XTemplate(
'<h2>HTML from EXT Template</h2><br /><br />',
'<h3>Paragraph 1</h3>',
'<p>Nulla at velit non odio interdum mattis elementum vel massa. Nullam sed neque odio. Vestibulum vel nunc at sem pulvinar consequat ac ut lacus. Vivamus viverra ante id felis blandit ullamcorper. Suspendisse faucibus, felis eget pharetra fermentum, purus ante ullamcorper orci, et faucibus nibh leo eu mi. In sed justo ac velit accumsan elementum vestibulum ac libero. Morbi ullamcorper quam lacus, nec adipiscing magna. Quisque in dolor metus. Donec erat metus, euismod id sodales in, porta non nisl. Mauris convallis aliquet ligula eget facilisis. Ut non ultrices nisl.</p>',
'<h3>Paragraph 2</h3>',
'<p>Quisque lacus nisl, pellentesque vitae tincidunt sit amet, accumsan id massa. Sed mattis mi sed mauris dictum non volutpat arcu semper. Curabitur sit amet quam ante. Donec sit amet eros nec velit tristique dignissim. Etiam facilisis, dui a faucibus feugiat, elit est lacinia augue, non volutpat felis neque sit amet nulla. Ut felis risus, varius at vestibulum sit amet, vulputate vel magna. Mauris ac elit quis massa mollis mattis.</p>'
);

var popupPanel = new Ext.Window({
id : 'popuppanel',
title : 'Template Panel',
modal : true,
draggable : false,
resizable : false,
closable : false,
height : 300,
width : 600,
border : false,
y : 80,
x : 200,
items : [
{
border : false,
bodyStyle : 'padding: 20px;',
html : template
}],
buttons : [
{
text : 'Close',
id : 'popuppanel_close',
handler : function() {
popupPanel.hide();
}
}]
});
popupPanel.show();
});

</script>

</head>
<body>
<div id="module" style="margin-top:20px;margin-left:20px;"></div>
</body>
</html>

Steps to reproduce the problem:

Copy script to new HTML file

Link to EXT 3.1.1

Load up in browser

evant

15 Feb 2010, 2:38 AM

This isn't a bug, the html option was never intended to support templates. The fact that it happened to work was unintended.

However, there is a new tpl option for Components in 3.1.1.

Also, why bother using a template in that case? You don't have any data attached to it? Why not just use a string, or an array of strings?

Marking this as closed.

catapult

15 Feb 2010, 3:14 AM

My template is actually being created by a PHP script. I hadn't realised that I could pass an array of strings to the html property and it would parse it.

Thanks for the help and prompt response.

evant

15 Feb 2010, 3:16 AM

You can't pass an array of strings, though you could just use:

html: ['a', 'b', 'c'].join('')

But the html property can also be a DomHelper config object.

catapult

15 Feb 2010, 4:07 AM

This works fine for me in all browsers I tried. It's messy I know :D

I will also investigate using the DomHelper as I haven't come accros that yet. Do you have any references to examples of its use?

Ext.onReady(function(){
Ext.QuickTips.init();

var htmlarray = new Array();
htmlarray[0] = '<h2>HTML from EXT Template</h2><br /><br />';
htmlarray[1] = '<h3>Paragraph 1</h3>';
htmlarray[2] = '<p>Nulla at velit non odio interdum mattis elementum vel massa. Nullam sed neque odio. Vestibulum vel nunc at sem pulvinar consequat ac ut lacus. Vivamus viverra ante id felis blandit ullamcorper. Suspendisse faucibus, felis eget pharetra fermentum, purus ante ullamcorper orci, et faucibus nibh leo eu mi. In sed justo ac velit accumsan elementum vestibulum ac libero. Morbi ullamcorper quam lacus, nec adipiscing magna. Quisque in dolor metus. Donec erat metus, euismod id sodales in, porta non nisl. Mauris convallis aliquet ligula eget facilisis. Ut non ultrices nisl.</p>';
htmlarray[3] = '<h3>Paragraph 2</h3>';
htmlarray[4] = '<p>Quisque lacus nisl, pellentesque vitae tincidunt sit amet, accumsan id massa. Sed mattis mi sed mauris dictum non volutpat arcu semper. Curabitur sit amet quam ante. Donec sit amet eros nec velit tristique dignissim. Etiam facilisis, dui a faucibus feugiat, elit est lacinia augue, non volutpat felis neque sit amet nulla. Ut felis risus, varius at vestibulum sit amet, vulputate vel magna. Mauris ac elit quis massa mollis mattis.</p>';

var popupPanel = new Ext.Window({
id : 'popuppanel',
title : 'Template Panel',
modal : true,
draggable : false,
resizable : false,
closable : false,
height : 300,
width : 600,
border : false,
y : 80,
x : 200,
items : [
{
border : false,
bodyStyle : 'padding: 20px;',
html : htmlarray
}],
buttons : [
{
text : 'Close',
id : 'popuppanel_close',
handler : function() {
popupPanel.hide();
}
}]
});
popupPanel.show();
});