Looping with Xtemplate

[Pat Emi]

Hi,
Please, i need help, on my app i want to loop through the record on my database, i want each record wrapped in a separate Xtemplate as it loops.
This is my code, it's not working...
My Model


{name: 'img', type: 'string'},
{name: 'description', type: 'string'},


My Store


Ext.create('Ext.data.Store', {
storeId : 'myStore',
model : 'dataModel',
result : [
{ img: '<img src="Com/Views/images/setraco.gif" width="50" height="50">', description:'Our services still beats competitors imaginations.<br>We are good at what we do, that makes us the best'},
{ img: '<img src="Com/Views/images/farm.jpg" width="50" height="50">', description:'So fresh, So natural, So tasty....'},
{ img: '<img src="Com/Views/images/oando.jpg" width="50" height="50">', description:'We bring it right to your doorstep'}
],
});


My Xtemplate


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

'<tpl if="count &gt; 0">',
'<table class="table1" style="border: 1px solid black">',
'<tpl for="result">',
'<tr>',
'<td>{img}</td>',
'<td>{description}</td>',
'</tr>',
'</tpl>',
'</table>',
'</tpl>',

'</tpl>'
);


Thanks.
Pat.

[mitchellsimoens]

Please post in the appropriate forum, we have to keep moving your threads for you.

[Pat Emi]

Maybe i don't know the appropriate forum to make my post. I will be grateful if you can direct me.
Thanks.

[mitchellsimoens]

Maybe i don't know the appropriate forum to make my post. I will be grateful if you can direct me.
Thanks.

Look at where your threads are. If you are asking a question regarding Ext JS 4, then the Ext JS 4 Q&A forum is the appropriate forum.

[sword-it]

I think you need to change the tpl structure according to the store.
Also replace the result config of the store by data.
Review the following code:



Ext.define('dataModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'img', type: 'string'},
{name: 'description', type: 'string'}
]
});


Ext.create('Ext.data.Store', {
id : 'myStore',
model : 'dataModel',
data: [
{ img: '<img src="Com/Views/images/setraco.gif" width="50" height="50">', description:'Our services '},
{ img: '<img src="Com/Views/images/farm.jpg" width="50" height="50">', description:'So fresh, So natural, So tasty....'},
{ img: '<img src="Com/Views/images/oando.jpg" width="50" height="50">', description:'We bring it right to your doorstep'}
]
});


var imageTpl = new Ext.XTemplate(
'<table class="table1" style="border: 1px solid black">',
'<tpl for=".">',
'<tr>',
'<td>{img}</td>',
'<td>{description}</td>',
'</tr>',
'</tpl>',
'</table>'
);


Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('myStore'),
tpl: imageTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available',
renderTo: Ext.getBody()
});

[Pat Emi]

@Sword-it,
Thanks for the correction, but i'm yet to get what i really want.

I want each record to be on a separate xtemplate not grouped into one xtemplate. Something that looks more like a gallery.

Each record is going to have a checkbox for selection and deselection, and a mouseover effect.

Thanks in advance.