PDA

View Full Version : Looping with Xtemplate



Pat Emi
18 Oct 2012, 6:26 AM
Hi,
I stumbled on this sample and modified it , the table actually displaying like i want it; creating a table for each record but the record is not displaying along with it.

This is my code, i'm doing this becos, i read that only array can be passed to xtemplate....


var myData ={
description:[
{img:'<img src="Com/Views/images/pat.jpg" width="50" height="50">', summary:''},
{img:'<img src="Com/Views/images/asian.jpg" width="50" height="50">', summary:''},
{img:'<img src="Com/Views/images/blackw2.jpg" width="50" height="50">', summary:''}
]
};
Ext.onReady(function () {

Ext.define('dataview_model', {
extend : 'Ext.data.Model',
fields : [
{name: 'count', type: 'string'},
{name: 'maxcolumns', type: 'string'},
{name: 'maxrows', type: 'string'},
{name: 'description', type: 'array'}
]
});
Ext.create('Ext.data.Store', {
storeId : 'viewStore',
model : 'dataview_model',
data : myData
// [
// {count: '7', maxcolumns: '10', maxrows: '5', description: ['<img src="Com/Views/images/pat.jpg" width="50" height="50">','200','300','400','500','600','700',]},
// {count: '7', maxcolumns: '10', maxrows: '5', description: ['400','15','10','50','55','600','569']}
// ]
});
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<table class="view_table">',
'<tr>',
'<tpl for="description">',
'<td>{.}</td>',
'<tpl if="xindex % 1 === 0">',
'</tr><tr>',
'</tpl>',
'</tpl>',
'</tr>',
'</table>',
'</tpl>'
);

Ext.create('Ext.DataView', {
width : 500,
height : 200,
renderTo : Ext.getBody(),
store : Ext.getStore('viewStore'),
tpl : tpl
});
});



Please i still need help, it's an important part of my application.
Thanks.

Pat.

metalinspired
18 Oct 2012, 7:03 AM
You're not telling the template what to render.
For example, change this line:
'<td>{.}</td>',
to:
'<td>{img}</td>',

Pat Emi
19 Oct 2012, 12:15 AM
@Inspired
Thanks alot for ur help, it worked.=D>