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 ?

    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

    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