Carousel and images store ?

[myput]

Hey,
i have a list, and in de detailPage i have a carousel. in itemTap, i send to carousel view the data od the list store.

App.views.DirectoryDetailPanelGalleryCarousel.update(record);

but i don't know why my carousel can't access to the data store image.

App.views.DirectoryDetailPanelGalleryCarousel = new Ext.Carousel ({
	fullScreen:true,
	cls:'bg',
	items: carouselpages
	items: [
		{
			html: '<img src="{image1}" width="100%" height="100%" />',
			cls : 'image1'
		},
		{
			html: '<img src="{image2}" width="100%" height="100%" />',
			cls : 'image2'
		},
	]
});


App.views.DirectoryDetailPanelGallery = new Ext.Panel ({
	fullscreen: true,
	layout: 'fit',
	dockedItems: [App.views.DirectoryDetailPanelGalleryToolbar],
	items: [App.views.DirectoryDetailPanelGalleryCarousel]
});

The carousel can't take {image1}.

Is it possible to send to the items of the carousel the url of an image ?

thanks by adance

[myput]

i found the solution:

i create a panel for each item of my carousel. I send from my listItemTap (from store) each record to each panel:

		App.views.DirectoryDetailPanelGalleryCarouselimage1.update(record);
		App.views.DirectoryDetailPanelGalleryCarouselimage2.update(record);
		App.views.DirectoryDetailPanelGalleryCarouselimage3.update(record);
		App.views.DirectoryDetailPanelGalleryCarouselimage4.update(record);
		App.views.DirectoryDetailPanelGalleryCarouselimage5.update(record);

and in the carousel:

App.views.DirectoryDetailPanelGalleryCarouselimage1 = new Ext.Panel ({
	fullscreen: true,
        tpl: '<img src="{image1}"/>',
});


App.views.DirectoryDetailPanelGalleryCarouselimage2 = new Ext.Panel ({
	fullscreen: true,
        tpl: '<img src="{image2}"/>',
});


App.views.DirectoryDetailPanelGalleryCarouselimage3 = new Ext.Panel ({
	fullscreen: true,
        tpl: '<img src="{image3}"/>',
});


App.views.DirectoryDetailPanelGalleryCarouselimage4 = new Ext.Panel ({
	fullscreen: true,
        tpl: '<img src="{image4}"/>',
});


App.views.DirectoryDetailPanelGalleryCarouselimage5 = new Ext.Panel ({
	fullscreen: true,
        tpl: '<img src="{image5}"/>',
});


App.views.DirectoryDetailPanelGalleryCarousel = new Ext.Carousel ({
	fullScreen:true,
	layout: 'card',
	items: [
		App.views.DirectoryDetailPanelGalleryCarouselimage1,
		App.views.DirectoryDetailPanelGalleryCarouselimage2,
		App.views.DirectoryDetailPanelGalleryCarouselimage3,
		App.views.DirectoryDetailPanelGalleryCarouselimage4,
		App.views.DirectoryDetailPanelGalleryCarouselimage5,
	]
});

that's all, i don't find an another solution for the moment. The this works fine.

[sangampandey]

The other solution would be iterate through your store like
var carouselArray = [];
<storename>.each(function(index,record){
carouselArray.push({
html:'<img id="carouselimage" src="'+record.get.<ImageTagName>+'">'
});
});

then
<carouselname>.add(carouselArray);
<carouselname>.doLayout();

please check for the syntax as I dont have right now any IDE to check it