tpl--having to iterate additional times when using store as opposed to inline data

I need an explanation on why I have to iterate multiple times when using a store for my tpl and not when using inline data using "data" property.

Inside my DataView initComponent:

Code:

 this.tpl = new Ext.XTemplate(
     '<table border="1" width="100%">',
       // '<tpl for = ".">',
           '<tr>',
              '<tpl for="COLUMNS">',
                  '<th style="color:white;">{.}</th>',
              '</tpl>',
           '</tr>',
        // '</tpl>',
        // '<tpl for=".">',
         '<tpl for="ROWS">',
           '<tr>',
             '<tpl for=".">',
               '<td align="center" style="background-color:{[this.getHeatColor(values.HEAT)]}">{VAL}</td>',
             '</tpl>',
           '</tr>',
         '</tpl>',
         //'</tpl>',
     '</table>',

when using a store, im having to iterate using <tpl for="."> (commented out above) before looping through COLUMNS array and again before looping ROWS array. I wanted to know why I need to iterate twice because both COLUMNS and ROWS are in the same data root.

When using inline data i can use above tpl as is, with the <tpl for="."> commented out.

JSON data:

Code:

{ "data" : {
      "COLUMNS": [
         "Column 1",
         "Column 2",
         "Column 3"
       ],


      "ROWS": [
         [{"VAL":"R1C1", "HEAT":1}, {"VAL":"R1C2", "HEAT":3}, {"VAL":"R1C3", "HEAT":2}],
         [{"VAL":"R2C1", "HEAT":1}, {"VAL":"R2C2", "HEAT":1}, {"VAL":"R2C3", "HEAT":4}]
       ]
     }
 }

tpl--having to iterate additional times when using store as opposed to inline data