View Full Version : Carousel, tpl and store

18 Apr 2011, 7:05 AM
I realise that this question has been asked before, but there apears to be little definition I can find.

I have created an app using the mvc suggested in many of the videos and tuts. I cant seem to fathom how to link up the results of a store thats grabbing xml to a carousel, via a template.

My 'weak' attempt is below.

// The model
Ext.regModel("brochure.models.carouselData", {
fields: [
{name: 'content', type: 'string'},

//The Store
brochure.stores.carouselData = new Ext.data.Store({
model: 'brochure.models.carouselData',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'resource/xml/data.xml',
reader: {
type: 'xml',
record: 'page'

//The template
tplSpreads = new Ext.Template(
'<img src="{content}" />'

//The View
brochure.views.FullSpreadView = Ext.extend(Ext.Carousel, {
layout: 'card',
tpl: tplSpreads,

initComponent: function() {
brochure.views.FullSpreadView.superclass.initComponent.apply(this, arguments);

The problems I' cant work out are...

Is stating the tpl: for the carousel enough to add the items: for the carousel?
Should I be looping though the store in the Ext.Template?
How do I upadate the brochure.views.FullSpreadView subclass? .update(storename) doesnt work.

If I try to update the Carousel with the template like


I get an error

Uncaught TypeError: Object function (){ superclass.apply(this, arguments); } has no method 'update'

I appreciate that all the answers are probably in the api docs which I have spent several days reading and researchng. But I've gotten into a loop myself and cant seem to see the wood from the trees as it were.

Many thanks for any help in advanced.

15 Nov 2011, 5:51 PM
This question seems old...but as far as I know you can't have a tpl on a carousel. Did you have any progress on this? I have a working in-line store so hopefully I can just adapt that...


17 Nov 2011, 12:11 AM
i look for a solution to show images from store in carousel too ...
do you have a solution please?

17 Nov 2011, 6:45 PM
I am working on a solution and have had some progress. My eventual aim is to have a Carousel that populates from the contents of a folder (a carousel that generates thumbnails automatically based on folder contents).

I have successfully managed to get a carousel to populate automatically the names of subdirectories in a folder. It shouldn't be too hard to adapt it to display thumbnails instead but so far I haven't had much luck.

I will post my progress so far soon.


18 Nov 2011, 12:06 AM
okey :) that sounds good.
For the moment, i managed to find a solution with creating some views for each image and call each views in the carousel container. I send the image since my list store when there is an itemTap.

18 Nov 2011, 5:21 AM
rec(name) si you path for your images ?
you must display your image path in html image balise
html: '<img src= ...

If this method not work, it was like me, it's for this reason i displayed my images in a tpl, in each views ...
A view per image...

18 Nov 2011, 5:40 AM
I've just worked it out! I've managed to get it to load images from a folder automatically and place them in a carousel. I had to delete the post but will re-write it with a different question / problem I have.


18 Nov 2011, 5:43 AM
yep :)