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 中使用 HTML 的img标签而不是imagextype？Sencha 组件将为您提供简单的方法来处理图像上的点击事件this并使用处理程序中的图像对象获取图像相关数据（如 src ）。

于 2013-06-24T06:11:38.350 回答