javascript - How to loop inside extjs XTemplate - Stack Overflow

admin管理员组

文章数量:1312774

Im trying to loop a array with extjs xtemplate and create a table

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

this is the working example which i have so far

/

what i want to do is stop the loop once there is 5 rows and add other values to second column like below

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

any idea how to do this?

Thanks.

Im trying to loop a array with extjs xtemplate and create a table

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

this is the working example which i have so far

http://jsfiddle/6HgCd/

what i want to do is stop the loop once there is 5 rows and add other values to second column like below

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

any idea how to do this?

Thanks.

• javascript
• extjs
• extjs4

Share Improve this question Follow asked Dec 26, 2011 at 11:58 Gihan LasitaGihan Lasita 3,0531414 gold badges4949 silver badges6666 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I can't find a way to it with template only, but below is my solution which uses template and datachanged listener.

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

Working demo: http://jsfiddle/6HgCd/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/6HgCd/4/

本文标签： javascriptHow to loop inside extjs XTemplateStack Overflow