Come ciclo all'interno extjs XTemplate

Question

Im cercando di ciclo un array con extjs xtemplate e creare una tabella

Ext.define('dataview_model', { 
    extend : 'Ext.data.Model', 
    fields : [ 
     {name: 'count',   type: 'string'}, 
     {name: 'maxcolumns', type: 'string'}, 
     {name: 'maxrows',  type: 'string'}, 
     {name: 'numbers',  type: 'array'} 
    ] 
}); 

Ext.create('Ext.data.Store', { 
    storeId : 'viewStore', 
    model : 'dataview_model', 
    data : [ 
     {count: '7', maxcolumns: '10', maxrows: '5', numbers: ['100','200','300','400','500','600','700']} 
    ] 
}); 

var tpl = new Ext.XTemplate(
    '<tpl for=".">', 

     '<tpl if="count &gt; 0">', 
      '<table class="view_table">',  
       '<tpl for="numbers">',  
        '<tr>', 
         '<td>{.}</td>', 
        '</tr>', 
       '</tpl>',  
      '</table>', 
     '</tpl>', 

    '</tpl>' 
); 

Ext.create('Ext.DataView', { 
    width    : 500, 
    height   : 200, 
    renderTo   : Ext.getBody(), 
    store    : Ext.getStore('viewStore'), 
    tpl    : tpl  
}); 

questo è l'esempio di lavoro che ho finora

http://jsfiddle.net/6HgCd/

quello che vuoi fare è fermare il ciclo una volta che ci sono 5 righe e aggiungere altri valori alla seconda colonna come sotto

+----+ +----+ 
| | | | 
+----+ +----+ 
+----+ +----+ 
| | | | 
+----+ +----+ 
+----+ 
| | 
+----+ 
+----+ 
| | 
+----+ 
+----+ 
| | 
+----+ 

qualche idea su come fare questo?

Grazie.

Answer 1

Non riesco a trovare il modo di farlo solo con il modello, ma di seguito è la mia soluzione che utilizza template e listener datachanged.

Ext.create('Ext.data.Store', { 
    storeId : 'viewStore', 
    model : 'dataview_model', 
    data : [ 
     {count: '7', maxcolumns: '10', maxrows: '5', numbers: ['100','200','300','400','500','600','700']}, 
     {count: '7', maxcolumns: '10', maxrows: '5', numbers: ['100','200','300','400','500','600','700']} 
    ], 
    listeners: { 
     datachanged: function(store) { 
      store.data.each(function(record) { 
       record.data.groupedNumbers = []; 
       for (var i = 0, j = 0; i < record.data.count; ++i, j = i % record.data.maxrows) { 
        record.data.groupedNumbers[j] = record.data.groupedNumbers[j] || { row: j, numbers: [] }; 
        record.data.groupedNumbers[j].numbers.push(record.data.numbers[i]); 
       } 
      }); 
     } 
    } 
}); 

var tpl = new Ext.XTemplate(
    '<tpl for=".">', 

     '<tpl if="count &gt; 0">', 
      '<table class="view_table" style="border: 1px solid black">',  
       '<tpl for="groupedNumbers">',  
        '<tr>', 
         '<tpl for="numbers">', 
          '<td>{.}</td>', 
         '</tpl>', 
        '</tr>', 
       '</tpl>',  
      '</table>', 
     '</tpl>', 

    '</tpl>' 
); 

demo di lavoro: http://jsfiddle.net/6HgCd/2/

Answer 2

var tpl = new Ext.XTemplate(
'<tpl for=".">', 
    '<table class="view_table">', 
     '<tr>',  
      '<tpl for="numbers">',   
       '<td>{.}</td>',    
       '<tpl if="xindex % 5 === 0">',    
        '</tr><tr>',     
       '</tpl>',    
      '</tpl>',   
     '</tr>',  
    '</table>', 
'</tpl>'  
); 

http://jsfiddle.net/6HgCd/4/