PDA

View Full Version : Stuck with a non rendering DataView :S



neongrau
7 Jul 2009, 12:19 AM
i'm trying to use a DataView but i can't get it to render the loaded records from store.
i load a couple of records but all that gets rendered is one empty record.

i tried trimming down to a small example and have exactly the same problem.
i guess i'm just missing some setting.

example:

store = new Ext.data.JsonStore({
url: 'page/details',
cls: 'elements-view',
root: 'elements',
remoteSort:true,
totalProperty:'totalCount',
fields: [{name:'foo', type:'string'}]
});

view = new Ext.DataView({
store: store,
autoHeight:true,
overClass:'element-hover',
itemSelector: 'div.element-wrap',
emptyText:'no elements...',
tpl: '<tpl for"."><div class="element-wrap"><h1>Test {foo}</h1></div></tpl>'
});

panel = new Ext.Panel({
id: 'panel',
layout:'fit',
title:'DataView Test',
items: view
});

panel.render(document.body);


after page is loaded i tried manually loading records by calling this from firebug console:
store.loadData({elements:[{foo:'foo'},{foo:'bar'},{foo:'baz'}], totalCount:3});

all i get is the singel empty record rendered. when i explore the items within "store" isee it has the 3 records i injected in store. so what am i doing wrong? please help :((

Animal
7 Jul 2009, 12:23 AM
The Panel needs sizing.

neongrau
7 Jul 2009, 12:30 AM
should autoHeight:true, autowidth:true work?

because no change with these, still nothing rendered except:

<div class="element-wrap"><h1>Test </h1></div>

Animal
7 Jul 2009, 12:36 AM
layout: 'fit', but autoheight/autoWidth?

Makes no sense.

neongrau
7 Jul 2009, 12:39 AM
ok i removed the fit config option.

store = new Ext.data.JsonStore({
url: 'page/details',
cls: 'elements-view',
root: 'elements',
remoteSort:true,
totalProperty:'totalCount',
fields: [{name:'foo', type:'string'}]
});

view = new Ext.DataView({
store: store,
autoHeight:true,
autowidth:true,
overClass:'element-hover',
itemSelector: 'div.element-wrap',
emptyText:'no elements...',
tpl: '<tpl for"."><div class="element-wrap"><h1>Test {foo}</h1></div></tpl>'
});

panel = new Ext.Panel({
id: 'panel',
autoHeight:true,
autowidth:true,
title:'DataView Test',
items: view
});

panel.render(document.body);


but still doesnt seem to be the reason the DataView doesnt render the records.
the panel looked fine to me.

Animal
7 Jul 2009, 12:45 AM
<tpl for=".">

neongrau
7 Jul 2009, 12:56 AM
omfg :"> :))

i didn't even note after i read this. i was looking up the api and reading about the "for" and thought "do i need to make it for=elements ?" when i realized.


damn. WTB glasses!

thanks alot! sometimes you need a different pair of eyes to spot such errors