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?
My View page Code:
Ext.define('SLS.BRND.WEB.view.ProjectsView', {
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
}
}]
}]
}
});
My Controller Page 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);
}
}
