कैसे ExtJS XTemplate

Question

इम पाश करने के लिए ExtJS xtemplate के साथ एक सरणी की कोशिश कर रहा है और एक मेज

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

बनाने यह काम कर उदाहरण जो मैं अब तक

http://jsfiddle.net/6HgCd/

है अंदर पाश करने के लिए मैं क्या एक बार 5 पंक्तियों के बाद लूप को रोकना है और

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

से दूसरे कॉलम में अन्य मान जोड़ें

कोई विचार यह कैसे करें?

धन्यवाद।

Answer 1

मुझे केवल टेम्पलेट के साथ कोई रास्ता नहीं मिल रहा है, लेकिन नीचे मेरा समाधान है जो टेम्पलेट और डेटाचैंग श्रोता का उपयोग करता है।

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

कार्य डेमो: 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/