PDA

View Full Version : How to loop inside extjs XTemplate?



extremed
26 Dec 2011, 4:19 AM
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>'
);


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.

mitchellsimoens
26 Dec 2011, 8:09 AM
There is not type 'array' in a field.. there the default auto which will not convert anything.

Doing a table that figures rows before columns is very complex. It is much easier to do columns before rows.

extremed
26 Dec 2011, 8:22 AM
array was a guess because string didnt work and couldn't find all the types that can use.

thanks for the info. im ok with doing column first but no idea how to loop it to get the output

mitchellsimoens
26 Dec 2011, 8:30 AM
While looping through the array using <tpl for="."> ('.' is the field where the period is root) you get access tot he index (xindex). Depending how many columns you want, if the xindex is divisible by that number of columns, then you need a new row by inserting '</tr><tr>'

extremed
26 Dec 2011, 9:39 AM
this seems to be giving the output as you suggested [column vise]
http://jsfiddle.net/6HgCd/1/

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

'<tr>',
'<tpl for="numbers">',

'<tpl if="xindex &lt; 11">',
'<td>{.}</td>',
'</tpl>',

'</tpl>',
'</tr>',

'<tr>',
'<tpl for="numbers">',

'<tpl if="xindex &gt; 10 && xindex &lt; 21">',
'<td>{.}</td>',
'</tpl>',

'</tpl>',
'</tr>',

'</table>',
'</tpl>'
);

now problem is loop through this if don't know how much numbers in array

skirtle
26 Dec 2011, 12:05 PM
Total array length is xcount.

You've got a lot of repetition there. As Mitchell suggested, you should just be able to inject a '</tr><tr>' when you hit the end of a row.

extremed
26 Dec 2011, 12:48 PM
Thanks a lot for the help

still dont get how to stop at lets say on 10th column and then move to second row

extremed
26 Dec 2011, 1:00 PM
got it

thanks guys


var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<table class="view_table">',
'<tr>',

'<tpl for="numbers">',

'<td>{.}</td>',

'<tpl if="xindex % 10 === 0">',
'</tr><tr>',
'</tpl>',

'</tpl>',

'</tr>',
'</table>',
'</tpl>'
);

skirtle
3 Oct 2012, 8:31 AM
@Sreekesh S K. Your question seems to be wholly unrelated to this thread, please start your own.

sameersoft@hotmail.com
27 Mar 2015, 6:35 PM
Hey ,My Json data like [{"leaf":null,"reportTreeType":null}] how could I render into xtemplate looping because Its dynamic json data need to loop but I am getting first data not looping all data .can i have apply xtemplate.overwrite (this.getBody(), this.data) : ? please let me know how could I define data here ?