2013-06-22 95 views
0

嗨,我正在Sencha Touch 2的圖片庫項目上工作,藉此當我點擊圖片時,它應該顯示圖片庫中的圖片。 但我在這裏面臨的問題是,當我點擊圖像carousal顯示,但它沒有得到圖像的src我試了很多關於它的事情,但沒有任何工作我發佈了以下代碼沒有在sencha圖片庫中獲取圖片的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無法獲得項目html的圖像鏈接的路徑在for循環部分的src「」即

html : '<img class="gallery-item" src=""' + Ext.get(me.images[i]).getAttribute('data-fullimage') + '" />', 

in ima ge查看器我希望當我點擊圖像時調用相同的src

回答

0

爲什麼在Sencha中使用HTML的img標籤而不是image xtype? Sencha組件將爲您提供簡單的方法來處理圖像上的tap event,並在處理程序中使用this圖像對象獲取像src之類的圖像相關數據。