1. #1
    Sencha User
    Join Date
    Sep 2011
    Location
    Sallanches, France
    Posts
    371
    Vote Rating
    1
    Answers
    16
    myput is on a distinguished road

      0  

    Default Answered: Carousel and images store ?

    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.
    Code:
    App.views.DirectoryDetailPanelGalleryCarousel.update(record);
    but i don't know why my carousel can't access to the data store image.
    Code:
    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

  2. 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:
    Code:
    		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:

    Code:
    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.

  3. #2
    Sencha User
    Join Date
    Sep 2011
    Location
    Sallanches, France
    Posts
    371
    Vote Rating
    1
    Answers
    16
    myput is on a distinguished road

      0  

    Default

    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:
    Code:
    		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:

    Code:
    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.

  4. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    15
    Vote Rating
    0
    Answers
    3
    sangampandey is on a distinguished road

      0  

    Default This would be the definite answer to your problem

    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
    Last edited by sangampandey; 18 Nov 2011 at 3:22 AM. Reason: Forgot something

Thread Participants: 1