如何在sencha touch中动态地将图像从商店绑定到轮播

时间:2012-05-18 10:07:44

标签: sencha-touch extjs sencha-touch-2 carousel

我在sencha touch应用程序中声明了以下商店

Ext.define('Sample.store.ImageStore', {
    extend: 'Ext.data.Store',
    config: {
        model: 'Sencha.model.ImageModel',
        data: [{ name: "cat", url: "http://bleachthemind.files.wordpress.com/2010/08/cute-bunnys-domestic-animals-2785589-1024-768.jpg" },

            { name: "lion", url: "http://images1.fanpop.com/images/photos/2600000/Cheetah-Family-wild-animals-2603080-1280-1024.jpg" }
        ]
    }
});

这是我在模型中声明的代码:

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

     fields:['name','url']
}
});

我很难用旋转木马构建一个视图,其中数据是从上面提到的商店中绑定的。我可以知道在视图中使用轮播消费商店数据写入的正确语法。

2 个答案:

答案 0 :(得分:3)

您无法将商店连接到Sencha Touch中的Carousel。看来你必须通过以下方式手动完成:

yourCarousel = Ext.getCmp('your_carousel_id');
store.each(function(record){
                    yourCarousel.add({
                        html: '<img src=' + record.get('url') + '/>'
                    });
                });

答案 1 :(得分:3)

Thiem的答案很好。 如果你想要一个更完整的例子,看看这个好帖子: http://edspencer.net/2012/02/building-a-data-driven-image-carousel-with-sencha-touch-2.html

我认为它应该涵盖您的所有需求;)

希望这有帮助。