Results 1 to 4 of 4

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

  1. #1
    Sencha User
    Join Date
    May 2012
    Location
    Bangalore
    Posts
    95
    Vote Rating
    1
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    May 2012
    Location
    Bangalore
    Posts
    95
    Vote Rating
    1
      0  

    Default

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

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Vote Rating
    22
      0  

    Default 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',

    :-)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •