Question

92

How to loop inside extjs XTemplate

rated 0 times [ 94] [ 2] / answers: 1 / hits: 15121 / 13 Years ago, mon, december 26, 2011, 12:00:00

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.net/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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

debra

Add To Favorites

Follow

Total Points: 583

Total Questions: 111

Total Answers: 111

Location: Reunion

Member since Mon, Dec 28, 2020

3 Years ago

answered 13 Years ago ellisw · Accepted Answer

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.net/6HgCd/2/