PDA

View Full Version : extjs 3.4 dataview + xtemplate simple loop



aelderiel
4 Dec 2012, 12:59 AM
I'm trying to display data from php using dataview and jsonstore. But it seems that i am mistaken somewhere.
Well, now i'm pretty sure that i'm stupid, but i can't get how this xtemplate working.
Here my json from php to js:

{"success":true,"data":{"images":[{"id":"2"},{"id":"2"},{"id":"2"},{"id":"2"}]}}
and here my dataview:

{
xtype : 'dataview',
autoScroll : true,
emptyText : 'No data',
itemSelector : 'div.x-storage-linked',
id : 'cartdata',
multiSelect : true,
plugins : new Ext.DataView.DragSelector( { dragSafe : true } ),
store : new Ext.data.JsonStore({
url : '/aecms/user-photos-view/',
autoLoad : true,
root : 'data',
fields : [
'images'
],
listeners : {
scope : this,
load : function(store) {
var data = store.reader.jsonData;
if (data.systemMessage) {
infoReport(data.systemMessage.title, data.systemMessage.message, data.systemMessage.icon);
}
}
}
}),
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<tpl for="images">',
'<div class="x-storage-linked">',
'<a title="test">{id}</a>',
'</div>',
'</tpl>',
'</tpl>'
)
}

and in the end i'm getting an empty text message.
I tried to display data as an array itself without images, json was:

{"success":true,"data":[{"id":"2"},{"id":"2"},{"id":"2"},{"id":"2"}]}
and tpl was:

'<tpl for=".">',
'<div class="x-storage-linked">',
'<a title="test">{id}</a>',
'</div>',
'</tpl>'

ofc it's displaying only one object (link with 2 as html), but i need 4 objects.
Thanks in advance.

mitchellsimoens
5 Dec 2012, 12:50 PM
The store shouldn't use the root config, the reader needs to.

aelderiel
5 Dec 2012, 11:50 PM
Thank you for answer, but i still can't get a rid of my problem, here my new dataview:


xtype : 'dataview',autoScroll : true,
emptyText : 'No data',
itemSelector : 'div.x-storage-linked',
id : 'cartdata',
multiSelect : true,
plugins : new Ext.DataView.DragSelector( { dragSafe : true } ),
store : new Ext.data.Store({
autoLoad : true,
proxy: new Ext.data.HttpProxy({
type: 'ajax',
url : '/aecms/user-photos-view/',
simpleSortMode: true
}),
reader: new Ext.data.JsonReader({
type: 'json',
root: 'data',
fields : [
{name:'images', type: 'auto'}

]
}),
listeners : {
scope : this,
load : function(store) {
var data = store.reader.jsonData;
if (data.systemMessage) {
infoReport(data.systemMessage.title, data.systemMessage.message, data.systemMessage.icon);
}
}
}
}),
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<tpl for="images">',
'<table class="storage-photoreport-table">',
'<tr>',
'<td>',
'<div class="storage-photoreport-wrap x-storage-linked" id="{id}">',
'<div class="storage-photoreport">',
'<a title="Cart" rel="cart-lightbox" href="{img_big}"><img src="{img_mid}"/></a>',
'</div>',
'</div>',
'</td>',
'</tr>',
'<tr>',
'<td>{name}</td>',
'</tr>',
'<tr>',
'<td>{save}</td>',
'</tr>',
'<tr>',
'<td>',
'<span class="delete-ico pt delete_from_cart" onclick="deleteFromCart($(this));">delete</span>',
'</td>',
'</tr>',
'</table>',
'</tpl>',
'</tpl>'
)

And my json:


{"success":true,"data":
{
"images":
[{
"img_mid":"\/FileStorage\/thumbs\/M_e495f9a2074f643ed3bcc844c99d8f53.jpg",
"img_big":"\/FileStorage\/thumbs\/B_e495f9a2074f643ed3bcc844c99d8f53_W.jpg",
"name":"cart.jpg",
"save":"<a href=\"\/storage.php?id=e18417eb8e823dbdf05199d0dc3151bc\"><img src=\"\/aecms\/interface\/ico\/save.png\"><\/a> 2306x1311px",
"id":61540
},
{
"img_mid":"\/FileStorage\/thumbs\/M_49d662e93ead63a18434a053e22db740.jpg",
"img_big":"\/FileStorage\/thumbs\/B_49d662e93ead63a18434a053e22db740_W.jpg",
"name":"snils.jpg",
"save":"<a href=\"\/storage.php?id=9459fa7daf4dd451f689f21207a9a290\"><img src=\"\/aecms\/interface\/ico\/save.png\"><\/a> 739x565px",
"id":61539
}]
}
}

Same result as before: emptyText message: 'No data';

mitchellsimoens
6 Dec 2012, 6:31 AM
Put the reader on the proxy.