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

Posted

技术标签:

【中文标题】如何在sencha touch中将图像从商店动态绑定到轮播【英文标题】:How to dynamically bind images from store to carousel in sencha touch 【发布时间】:2012-05-18 10:07:43 【问题描述】:

我在我的 sencha touch 应用程序中声明了以下 Store

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']

);

我在构建带有轮播的视图时遇到了困难,其中数据是从上述商店绑定的。请我知道​​要在使用轮播消耗商店数据的视图中编写的正确语法。

【问题讨论】:

【参考方案1】:

您无法在 Sencha Touch 中将 Store 连接到 Carousel。看来您必须通过以下方式手动执行此操作:

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

【讨论】:

谢谢回复,你上面说的code应该放在store里吧? 是的,或者在任何控制器功能中,因为您也可以通过Ext.getStore('your_store_id') 轻松获得您的商店 我使用商店的视图看起来像这样 Ext.define('Sample.view.ProductsView', extend: 'Ext.Panel', xtype: 'productsview', config: dockedItems: [ xtype: 'toolbar', title: 'Products' ], items: [ xtype: 'carousel', store: 'ImageStore', ] ); 如果您将 id:'imageCarousel' 设置为轮播声明,那么在我的上述代码 sn-p 中,Ext.getStore('ImageStore') 等于 storeExt.getCmp('imageCarousel') 等于 yourCarousel。然后你可以在任何你想要的地方编写代码 我将视图语法更改为这个,它不起作用Ext.define('Sample.view.ProductsView', extend: 'Ext.Panel', xtype: 'gallery', id:'imagecarousel' , config: dockedItems: [ xtype: 'toolbar', title: 'Products' ], items: [ xtype: 'carousel', store: 'ImageStore', id:'imagecarousel', initComponent:store.each( function(record) imagecarousel.add( html: '' ); ); ] );【参考方案2】:

蒂姆的回答很好。 如果您想要一个更完整的示例,请查看这篇不错的帖子: http://edspencer.net/2012/02/building-a-data-driven-image-carousel-with-sencha-touch-2.html

我认为它应该满足您的所有需求;)

希望这会有所帮助。

【讨论】:

感谢您的回复,我尝试遵循相同的示例,但问题是他们的 app.js 文件中的代码太多,这并不理想,我希望我的 app.js 文件最小化 borck 的回复是一个很好的建议,如果您想构建类似扩展程序的东西,您将以编程方式多次使用它。顺便说一句,核心是他们使用pushadd手动将图像添加到轮播中,所以只要你知道这个技巧,你就可以选择合适的方式。

以上是关于如何在sencha touch中将图像从商店动态绑定到轮播的主要内容,如果未能解决你的问题,请参考以下文章

如何从商店 sencha touch 为图表提供动态轴的最小值和最大值

Sencha Touch 使用 mvc 动态使用商店?

如何从 SenCha Touch 中的商店检索数据

如何从加载的商店 sencha touch 中删除额外参数

Sencha Touch 2:数据集成或如何在sencha和javascript之间共享动态信息

Sencha touch 2 - 如何创建动态轮播?