こんにちは私はSenchatouch2を使用してアプリケーションを実行しました。カルーセルでは、コントローラーレベルでWebサービスから動的に画像をバインドしていました。カルーセルで画像を移動/スライドすると、次の画像がカルーセルで読み込まれる/表示されるまでに時間がかかります。その時点で元の画像の読み込みに時間がかかる場合は、カルーセルにデフォルトの読み込みマスクが表示されます。カルーセルをスライドさせているときに元の画像を読み込むのに時間がかかる場合は、要件に従って、デフォルトの画像をカルーセルで表示する必要があります。元の画像が読み込まれると、デフォルトの画像を表示する必要はありません。明らかに読み込みマスクも使用されます。誰かがこの煎茶touch2を達成する方法を教えてもらえますか？
マイビューページコード：
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
}
}]
}]
}
});
マイコントローラーページコード：
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);
}
}