Làm thế nào để vòng lặp bên ExtJS XTemplate

Question

Im cố gắng để lặp một mảng với ExtJS xtemplate và tạo ra một bảng

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  
}); 

này là ví dụ làm việc mà tôi có cho đến nay

http://jsfiddle.net/6HgCd/

những gì tôi muốn làm là dừng vòng lặp khi có 5 hàng và thêm các giá trị khác vào cột thứ hai như bên dưới

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

bất kỳ ý tưởng làm thế nào để làm điều này?

Cảm ơn.

Answer 1

Tôi không thể tìm cách chỉ với mẫu, nhưng bên dưới là giải pháp của tôi sử dụng trình nghe mẫu và 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>' 
); 

bản demo làm việc: 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/