Ext version tested:
Browser versions tested against:
- Chrome 19
- IE9
- Firefox 13.0.1 (firebug 1.9.2 installed)
Description:XTemplate does not set parent values properly, when there's a nestled loop inside the loop that uses the parent value.
The example below has "tpl for" loops in three levels: level1, level2 and level3. On level2, parent.id only has a value the first time the level2 loop iterates, and in each following iteration on level2 parent.id is not set. When level1 iterates a second time, the first iteration in level2 again has a value, only to be unset the next time level2 iterates. If the "tpl for" loop for level3 is removed, however, level2 works as expected. See the areas marked yellow in the screenshot below, to see how parent.id is sometimes set, and sometimes not, when level2 loops.
Steps to reproduce the problem:
- Save the code below in an html file, then load the html file in a browser.
The result that was expected:
- {parent.id} should have the same value in all iterations of the loop
The result that occurs instead:
- {parent.id} is only set in the first iteration of the loop
Test Case:
Code:
<html>
<head>
<title>Template bug</title>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all-gray.css">
<script type="text/javascript" src="http://cdn.sencha.io/ext-4.1.0-gpl/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
var data = [
{
id: 1,
level2: [
{
id: 11,
level3: [
{ id: 111 }, { id: 112 }, { id: 113 }
]
},
{
id: 12,
level3: [
{ id: 121 }, { id: 122 }, { id: 123 }
]
},
{
id: 13,
level3: [
{ id: 131 }, { id: 132 }, { id: 133 }
]
}
]
},
{
id: 2,
level2: [
{
id: 21,
level3: [
]
},
{
id: 22,
level3: [
]
}
]
}
];
var tpl = new Ext.XTemplate(
'<tpl for=".">' +
'<div class="row-wrap">' +
'level 1: id: {id}<br>' +
'<tpl for="level2">' +
' level 2: id: {id}, parent.id: {parent.id} <span style="color: red"><-- parent.id not set in second nestled iteration or after!</span><br>' +
'<tpl for="level3">' +
' level 3: id: {id}, parent.id: {parent.id}<br>' +
'</tpl>' +
'</tpl>' +
'</div>' +
'</tpl>'
);
tpl.overwrite("template-id", data);
});
</script>
</head>
<body>
<pre>
<div id="template-id">This will be overwritten by template render</div>
</pre>
</body>
</html>
Screenshot:
Debugging already done:
Possible fix:
Additional CSS used:
Operating System:
ExtJs 4.1.0 - XTemplate and nestled tpl for loops does not set parent values properly
Reply With Quote
