如何在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')
等于 store
和 Ext.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 的回复是一个很好的建议,如果您想构建类似扩展程序的东西,您将以编程方式多次使用它。顺便说一句,核心是他们使用push
或add
手动将图像添加到轮播中,所以只要你知道这个技巧,你就可以选择合适的方式。以上是关于如何在sencha touch中将图像从商店动态绑定到轮播的主要内容,如果未能解决你的问题,请参考以下文章
如何从商店 sencha touch 为图表提供动态轴的最小值和最大值