Results 1 to 2 of 2

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

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-6716 in a recent build.
  1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    1
    Vote Rating
    1
      1  

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

    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:

    Debugging already done:
    • none

    Possible fix:
    • not provided

    Additional CSS used:
    • only default ext-all.css

    Operating System:
    • Windows 7 64 Enterprise

  2. #2
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,711
    Vote Rating
    242
      0  

    Default

    Thanks for the test case and bug report! Your test case is now in our unit test suite.
    Don Griffin
    Director of Engineering - Frameworks (Ext JS / Sencha Touch)

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •