Hybrid View

    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
    Vote Rating
    foborg is on a distinguished road


    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)
    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:
        <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.overwrite("template-id", data);
          <div id="template-id">This will be overwritten by template render</div>
    • 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

  2. #2
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Vote Rating
    dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of



    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!"

Thread Participants: 1

Tags for this Thread