こんにちは、Sencha Touch 2 で画像ギャラリー プロジェクトに取り組んでいます。画像をクリックすると、ギャラリー カルーセルに画像が表示されます。しかし、私がここで直面している問題は、画像をクリックするとカルーサルが表示されますが、画像の src を取得できないということです。それに関して多くのことを試しましたが、何も機能していません。以下のコードを投稿しています。
Ext.define('ImageViewer.view.Gallery', {
extend: 'Ext.Container',
xtype: 'gallery',
config:{
xtype: 'container',
scrollable: 'vertical',
floatingCloseBtn : true,
style: 'margin: auto !important; text-align: center;',
defaults: {
style: "float: left; margin: 10px; box-shadow: "+
"#999 0px 0px 6px 2px; border: 1px solid #888; "+
"overflow: hidden;",
height: 170,
width: 110
},
items: [
{
html: '<img class="image-wrap" src="http://content6.flixster.com/movie/11/13/43/11134356_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content9.flixster.com/movie/11/16/11/11161107_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content8.flixster.com/movie/11/16/10/11161098_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content9.flixster.com/movie/11/15/90/11159075_pro.jpg" />'
}]
},
initialize : function(){
var me = this;
// Add tap event on the images to open the carousel
me.element.on('tap', function(e, el){
me.showGalleryCarousel(el);
}, me, {
delegate : 'img'
});
//me.loadImages();
//me.callParent(arguments);
},
/**
* Show the gallery carousel with all the images
*/
showGalleryCarousel : function(clickedImage){
var me = this,
clickedImgIndex = 0,
// Create the Gallery Carousel
galleryCarousel = Ext.Viewport.add({
xtype : 'gallerycarousel',
totalCount : me.items.length
});
// Query all the images and save in an array
me.images = me.images || me.element.query('img');
// On clicking close icon, hide the carousel
// and destroy it after a certain perdiod
galleryCarousel.element.on('tap', function(e, el){
galleryCarousel.hide(true);
Ext.defer(function(){
Ext.Viewport.remove(galleryCarousel);
}, 300);
}, this, {
delegate : 'div[data-action="close_carousel"]'
});
// Get the image index which is clicked
while( (clickedImage = clickedImage.previousSibling) != null ) {
clickedImgIndex++;
}
// Add the images as separate containers in the carousel
for(var i=0; i<me.images.length; i++){
galleryCarousel.add({
xtype : 'container',
html : '<img class="gallery-item" src=""' + Ext.get(me.images[i]).getAttribute('data-fullimage') + '" />',
index : i + 1
});
}
// Set the clicked image container as the active item of the carousel
galleryCarousel.setActiveItem(clickedImgIndex);
// Show the carousel
galleryCarousel.show();
}
});
ここに含まれていない GalleryCarousal.js ファイルがあります。問題は、src が for ループ セクションのsrc ""でアイテム html の画像リンクのパスを取得できないことです。
html : '<img class="gallery-item" src=""' + Ext.get(me.images[i]).getAttribute('data-fullimage') + '" />',
画像ビューアで、画像をタップしたときに同じ src が呼び出されるようにしたい