0

こんにちは、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 が呼び出されるようにしたい

4

1 に答える 1

0

Sencha で xtypeのimg代わりに HTML のタグを使用しているのはなぜですか? imageSencha コンポーネントは、画像のタップ イベントthisを処理し、ハンドラーで画像オブジェクトを使用して src のような画像関連データを取得する簡単な方法を提供します。

于 2013-06-24T06:11:38.350 に答える