動態創建傳送帶使用sencha touch2

我有以下示例MVC應用程序試圖動態創建帶有從某個遠程URL獲取圖像源的傳送帶，當我執行應用程序時，我沒有看到任何圖像被附加到我的carouselview，請任何人都可以突出我要去哪裏錯了？動態創建傳送帶使用sencha touch2

型號代碼：

Ext.define('Sencha.model.ImageModel', { 
    extend: 'Ext.data.Model', 

    config: { 
     fields: [ 
      'id', 'title', 'link', 'author', 'content', 
      { 
       name: 'image', 
       type: 'string', 
       convert: function (value, record) { 
        var content = record.get('content'), 
         regex = /img src=\"([a-zA-Z0-9\_\.\/\:]*)\"/, 
         match = content.match(regex), 
         src = match ? match[1] : ''; 

        if (src != "" && !src.match(/\.gif$/)) { 
         src = "http://src.sencha.io/screen.width/" + src; 
        } 

        return src; 
       } 
      } 
     ] 
    } 

});

店內碼：

Ext.define('Sencha.store.ImageStore', { 
    extend: 'Ext.data.Store', 
    config: { 
     model: 'Sencha.model.ImageModel', 

     proxy: { 
      type: 'jsonp', 
      url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://www.acme.com/jef/apod/rss.xml&num=20', 

      reader: { 
       type: 'json', 
       rootProperty: 'responseData.feed.entries' 
      } 
     } 
    } 
});

控制器代碼：

Ext.define('Sencha.controller.CarouselController', { 
    extend: 'Ext.app.Controller', 
    config: 
     { 
      init: function() { 
       var carousel = Ext.getCmp('imagecarousel'); 
       Ext.getStore('ImageStore').load(function (pictures) { 
        var items = []; 
       Ext.each(pictures, function (picture) { 
         if (!picture.get('image')) { 
          return; 
         } 

         items.push({ 
          xtype: 'apodimage', 
          picture: picture 
         }); 
        }); 

        carousel.setItems(items); 
        carousel.setActiveItem(0); 
       }); 
      } 
     } 
});

查看代碼：

Ext.define('Sencha.view.CarouselView', { 
    extend: 'Ext.Img', 
    id:'imagecarousel', 
    xtype: 'apodimage', 

    config: { 
     /** 
     * @cfg {apod.model.Picture} picture The Picture to show 
     */ 
     picture: null 
    }, 

    updatePicture: function (picture) { 
     this.setSrc(picture.get('image')); 
    } 
});

個

App.js代碼：

Ext.Loader.setConfig({ 
    enabled: true 
}); 
Ext.require([ 
    'Ext.carousel.Carousel', 
    'Ext.data.proxy.JsonP' 
]); 


Ext.application({ 
    name: 'Sencha', 
controllers: ['CarouselController'], 
stores: ['ImageStore'], 
models: ['ImageModel'], 
//views:['CarouselView'], 
    launch: function() { 
     Ext.create('Sencha.view.CarouselView'); 
    } 
});

來源

2012-05-19 mahesh

能更具體什麼不起作用。嘗試在你的代碼中添加console.logs，並給我們結果，比如Ext.each類似這樣的東西的大小。

我最初的想法是使用store.load的回調函數：

Ext.getStore('ImageStore').load(
    callback: function (pictures) { 
    var items = []; 
    Ext.each(pictures, function (picture) { 
    if (!picture.get('image')) { 
     return; 
    } 
    items.push({ 
     xtype: 'apodimage', 
     picture: picture 
    }); 
    }); 

    carousel.setItems(items); 
    carousel.setActiveItem(0); 
});

希望這有助於

來源

2012-05-19 22:45:23

感謝您的答覆，我試圖按照此URL所示的例子：HTTP ：//edspencer.net/2012/02/building-a-data-driven-image-carousel-with-sencha-touch-2.html，我稍微重構了代碼，使我的app.js文件最小化，我有介紹了控制器，並將我的綁定功能寫在他們的上面，我只是想知道實現這個功能的最佳方式是什麼？ – mahesh

做了這項工作mahesh？ – heorling

我有同樣的問題，但無法獲得解決方案，如何使用動態數據創建輪播。請訪問：http：//stackoverflow.com/questions/18075538/how-to-make-carousel-infinite-in-sencha – 2013-08-08 05:21:50

動態創建傳送帶使用sencha touch2

回答

相關問題