使用 sencha touch2 动态创建轮播

Posted 2023-02-25

【中文标题】使用 sencha touch2 动态创建轮播

【英文标题】：dynamically creating carousel using sencha touch2

【发布时间】：2012-05-19 09:49:56

【问题描述】：

我有以下示例 MVC 应用程序尝试使用从某个远程 url 获取的图像源动态创建轮播，当我执行该应用程序时，我没有看到任何图像被附加到我的轮播视图中，请任何人都可以突出显示我在哪里出错了吗？

型号代码：

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');
    
);

【参考方案1】：

可以更具体地说明什么不起作用。尝试在您的代码中添加 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);
);

希望对你有帮助

【讨论】：

感谢您的回复，我正在尝试按照此 URL 中显示的示例：edspencer.net/2012/02/…，我稍微重构了代码以使我的 app.js 文件最小化，我已经引入了控制器并编写了我的绑定功能超过了他们，我只是想知道实现这一目标的最佳方法是什么？

我有同样的问题，但无法获得解决方案，如何使用动态数据创建轮播。请访问：***.com/questions/18075538/…