PDA

View Full Version : Template not rendering inside a dataview



karan
14 Apr 2011, 1:58 PM
Hi,

The following code is to render a template inside a dataview, loading data from an ArrayStore.

If I directly compile and render the template to doc.body, it works fine. If I put it inside a dataview, the token substitution doesn't take place and the template renders with blanks. Inspecting the dom, it seems the ArrayStore loads the data correctly and is linked to the Dataview.

My guess is that the dataview can't load and substitute the data from the ArrayStore. Any pointers why this may be happening?

-Karan
(I'm v new to ext (and js in general) and still learning. Hopefully this is something v minor)



Ext.onReady(dispDataView);

function dispDataView(){

var myTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="fm">',
'<span class="fm-name" >{xcount}. {name}</span><br />',
'<span class="fm-addr" >{addr}</span><br />',
'<span class="fm-time" >{time} Next: {next}</span><br />',
'<a href="#" id="{mid}" onclick="handleLinkClick(this)" class="link">Invite Friends</a>',
'</div>',
'</tpl>'
);

var tplData = [
{mid: '1', name: 'Noe Valley meeting point', addr: '24th and 25th St, San Francisco, CA -94114',time: 'Saturdays, 8AM - 2PM', next:'4/16'},
{mid: '2', name: 'Castro meeting point', addr: 'Castro and 18th, San Francisco, CA -94114',time: 'Wednesdays, 2pM - 5PM', next:'4/16'},
{mid: '3', name: 'City Center meeting point', addr: 'City Hall, San Francisco, CA -94114',time: 'Sundays, 8AM - 2PM', next:'4/16'},
{mid: '4', name: 'Ferry Building meeting point', addr: '1 Ferry Plaza, San Francisco, CA -94114',time: 'Saturdays, 8AM - 2PM', next:'4/16'},
{mid: '5', name: 'Sunset meeting point', addr: '4th and Lincoln, San Francisco, CA -94114',time: 'Sundays, 8AM - 2PM', next: '4/16'}
];
//
//myTpl.compile();
//myTpl.append(document.body, tplData);

var fmStore = new Ext.data.ArrayStore({
// store configs
autoDestroy: true,
storeId: 'myFmStore',
// reader configs
idIndex: 0,
fields: fmFields ,
proxy: new Ext.data.MemoryProxy(),
data: tplData

});
// fmStore.loadData(tplData);

var fmDataview = new Ext.DataView({
store: fmStore,
tpl: myTpl,
autoHeight:true,
multiSelect: false,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display'
}).show();

var mVp = new Ext.Viewport({
layout : 'hbox',
frame : true,
margin : '5 5 5 5',
bodyStyle:'padding: 5px',
items:[fmDataview],
renderTo: document.body

});

};