ExtJs 4.1.0 - XTemplate and nestled tpl for loops does not set parent values properly

**foborg** · 30 Jun 2012 12:14 PM

Ext version tested:

ExtJS 4.1.0

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">&lt;-- 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:

This is a screenshot of the output from the test-code. The yellow areas marks where the parent.id output should be:ExtJs-4.1.0-XTemplate-bug.png

Debugging already done:

none

Possible fix:

not provided

Additional CSS used:

only default ext-all.css

Operating System:

Windows 7 64 Enterprise

**dongryphon** · 10 Jul 2012 10:10 PM

Thanks for the test case and bug report! Your test case is now in our unit test suite.

ExtJs 4.1.0 - XTemplate and nestled tpl for loops does not set parent values properly

Thread Tools

Search Thread

Display

Hybrid View

ExtJs 4.1.0 - XTemplate and nestled tpl for loops does not set parent values properly

ExtJs 4.1.0 - XTemplate and nestled tpl for loops does not set parent values properly

Tags for this Thread