PDA

View Full Version : How do you use tpl (templates) with sencha touch?



reynoldsdesign
20 Mar 2011, 3:04 PM
Hello,

I have been going through the getting started guide (which is a little much for "getting started") and trying to build my own tool. I have data pulling from another server in json format and it appears to be working properly (at least when alerting it to the screen).

Anyways I cannot get a template to work no matter what I try.

Below is what my code looks like:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,

onReady: function() {

var restaurantList = new Ext.Component({
title: 'Restaurants', // Name that appears on the tab
cls: 'restaurants', // The CSS class. Lets you style elements on the timeline
scroll: 'vertical', // Make it scroll vertically
tpl: [ // Set up a teplate to display restaurant data
'<tpl for=".">',
'<div class="restaurant">',
'<h2>{restaurant_name}</h2>', // Restaurants name
'<p>{restaurant_address}</p>', // Restaurant Address
'</div>',
'</tpl>'
]
});


var getRestaurants = function()
{

Ext.getBody().mask('Loading...', 'x-mask-loading', false);

Ext.util.JSONP.request({
url: 'myurl.php',

callbackKey: 'callback',
params: {
city: 'Rochester',
state: 'MN',
zip: '55901',
radius: 15,
listings: 30
},
callback: function(data) {
data = data.results.listings;

/*var html = restaurantList;
Ext.getCmp('content').update(listings);*/
restaurantList.update(data);
alert(data);


Ext.getBody().unmask();
}
});
};


new Ext.Panel({
fullscreen: true,
id: 'content',
scroll: 'vertical',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'Restaurants',
handler: getRestaurants
}]
}]
});


/*var refresh = function() {

}

var panel = new Ext.TabPanel({
fullscreen: true, // The panel will take up the full rather than partial screen
cardAnimation: 'slide', // Special effect for switching between cards
items: [restaurantList]
});*/
getRestaurants();

}

});