1. #1
    Sencha User
    Join Date
    May 2012
    Location
    Bangalore
    Posts
    95
    Vote Rating
    1
    Rameshlamani is on a distinguished road

      0  

    Default How to show default image in the carousel while image sliding in the same carousel?

    How to show default image in the carousel while image sliding in the same carousel?


    HI I have done application using Sencha touch2. In carousel we were binding the images dynamically from the web service at the controller level. When we move/slide the images in carousel, next images are taking time to load/show in the carousel. If it takes time to load original image that time it will show default load mask on the carousel. As per our requirement we need to show default image in carousel if it takes time to load original images while sliding the carousel. Once original image is loaded no need to show the default image obviously load mask also will go.
    Can anyone tell me how to achieve this one Sencha touch2?
    View Page Code
    Code:
    Ext.define('SLS.BRND.WEB.view.MYView', {
        extend: 'Ext.Panel',
        requires: [        
            'Ext.Carousel'
        ],
        id: 'projectprofile',
        xtype: "projectspage",
        config: {
            autoDestroy: true,
            fullscreen: true,       
            layout: {
                type: 'vbox'
            },
            items: [               
     
                    {
                        xtype: 'panel',
                        layout: 'fit',
                        flex: Ext.os.is.Phone ? 5 : 5,
                        items: [
                            {
                                xtype: 'carousel',
                                direction: 'horizontal',
                                directionLock: true,
                                id: 'imgId',
                                flex: Ext.os.is.Phone ? 5 : 5,                          
                                config: {
                                    fullscreen: true                               
                                }
                            }
                        ]
                    }                
            ]
        }
    });
    Controller Page Code
    Code:
    var retrievedObject = localStorage.getItem('ProjectDetails');
                                jsonObj = Ext.decode(retrievedObject);
                                var cmp = Ext.getCmp('imgId'); 
    if (jsonObj != null) {
                                    if (jsonObj != null) {
                                        var itemsoverlay = [];
                                        if (jsonObj.ProjectMainGalleryRoyalGardenia != null) {
                                            for (var i = 0; i < jsonObj.ProjectMainGalleryRoyalGardenia.length; i++) {
                                                var imgURL = jsonObj.ProjectMainGalleryRoyalGardenia[i].ImageUrl;
                                                var senchaIoProjectImageURL = imgURL;
                                                var senchabigImage = imgURL;
                                               
                                                var images = [{ url: senchaIoProjectImageURL, bigUrl: senchabigImage}]
                                                Ext.each(images, function (picture) {
                                                    var img = picture.url;
                                                    var bigImg = picture.bigUrl;
                                                    itemsoverlay.push({
                                                        xtype: 'label',
                                                        html: '<div style="width:' + window.innerWidth + 'px;height:' + SLS.BRND.WEB.Common.Constants.carouselCanvasHeight + 'px;"><img src=' + img + ' style="width:100%;height:100%"/></div>'
                                                    });
                                                });
                                            }
                                        }
                                        cmp.setItems(itemsoverlay);
                                        cmp.setActiveItem(0);
                                    }
    }

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    So you want to capture the load event of every image in an item? You can create an Image object is JavaScript and that will fire a load event.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    May 2012
    Location
    Bangalore
    Posts
    95
    Vote Rating
    1
    Rameshlamani is on a distinguished road

      0  

    Default


    Got solution. Now it was fine as per my requirement.

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    409
    Vote Rating
    18
    digeridoopoo will become famous soon enough

      0  

    Default Does this help...

    Does this help...


    Not sure if this helps you but for my dynamic carousel I set a class under the 'cls' config to have an image that says 'loading...'. This is the default image that appears on each popup of my dynamic carousel. I just define in my css the background image and call it in the carousel on this config item:

    cls: 'loadingimages',

    :-)