PDA

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



reynoldsdesign
20 Mar 2011, 3:07 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.

According to the getting started guide: http://dev.sencha.com/deploy/touch/getting-started.html

the templates should be able to be used like this:



var timeline = new Ext.Component({
title: 'Timeline',
cls: 'timeline',
scroll: 'vertical',
tpl: [
'<tpl for=".">',
'<div class="tweet">',
'<div class="avatar"><img src="{profile_image_url}" /></div>',
'<div class="tweet-content">',
'<h2>{from_user}</h2>',
'<p>{text}</p>',
'</div>',
'</div>',
'</tpl>'
]
});

// farther down in the example

timeline.update(data);


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;

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
}]
}]
});


getRestaurants();

}

});

d5chris
20 Mar 2011, 4:32 PM
Is your 'data' variable that you're using to update the template an array?
Can you do a JSON.stringify dump of it for us?
Cheers

reynoldsdesign
20 Mar 2011, 5:02 PM
hi d5chris,

i dont think the data variable is an array. its coming back from php in this format JSON format. how would i give you a JSON.stringify dump? im pretty new to json.

thanks

reynoldsesign

d5chris
20 Mar 2011, 5:07 PM
Hi,
to dump it, next to where you're doing alert(data), do:

console.log(JSON.stringify(data));
I use chrome, it may not work in all other browsers.
Cheers

reynoldsdesign
21 Mar 2011, 6:44 AM
hi d5chris,

here is a dump of my console:

(there are around 300 fields i just condensed it down.)



[{"restaurant_name":"2 Regio El Mexican Grill ","restaurant_address":"1205 7th St NW"},{"restaurant_name":"300 First","restaurant_address":"300 1st Ave NW"},{"restaurant_name":"Tilly's Tavern","restaurant_address":"1015 S Minnesota Ave"}]


thanks

d5chris
21 Mar 2011, 1:30 PM
I think i found it: You haven't added your 'restaurantList' to the 'items' array in your unnamed fullscreen panel.
Try that, eg:


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

// Make the restaurant list fill the content area of this fullscreen panel
items: [restaurantList]

});

reynoldsdesign
21 Mar 2011, 1:45 PM
d5chris you rock!

now i need to get it to scroll properly but i'll see what i can find on that.

thanks :)

d5chris
21 Mar 2011, 1:57 PM
Thanks :)

As for scrolling, you'll want some combo of layout and scroll settings on the list and the panel to get it to work.
My preference is to get the fullscreen panel to have layout:fit and scroll:false, and the list to have scroll:vertical. That way, the panel doesn't control the scrolling, the list does. But its up to you.

whiplash
23 Jan 2012, 3:37 AM
Hey

Hopefully you can share some light on my scrolling issue please.... I can't for the life of me see whats wrong with it....

Regards


Whiplash




App.views.viewport = new Ext.Panel({
id: 'cards',
fullscreen: true,
layout: 'card',
cardAnimation: 'slide',
items: [
App.views.groupsListContainer,
App.views.assetsListContainer
]
})

App.views.assetsListContainer = new Ext.Panel({
id: 'assetsListContainer',
layout: 'fit',
scroll: false,
dockedItems: [App.views.assetsListToolbar],
items: [App.views.assetsList]
});

App.views.assetsList = new Ext.List({
id: 'assetsList',
layout: 'fit',
scroll: 'vertical',
layoutOnOrientationChange: true,
store: currentAssets,
onItemDisclosure: function (record) {//blah blah blah}
});