Sencha Touch 2 Carousel 模仿list itemtap

最新推荐文章于 2022-08-25 13:24:03 发布

原创最新推荐文章于 2022-08-25 13:24:03 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext #carousel #js #ViewUI

Sencha Touch 同时被 2 个专栏收录

34 篇文章

订阅专栏

编程

21 篇文章

订阅专栏

本文详细介绍了如何利用Ext.js的Carousel组件创建动态轮播图，并通过自定义事件监听实现图片点击后的详细视图跳转功能。包括配置轮播图方向、加载图片数据、绑定事件处理器等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


/** 
 * @Author sai 
 *  Carousel 模仿list itemtap事件
 */ 
Ext.define('SmartMenu.view.tips.Carousel', {
	extend: 'Ext.Carousel',
	xtype:'myCarousel',

	requires: [
		'Ext.carousel.Carousel',
	],

	config: {
		 direction: 'horizontal',		 
		 listeners: {
			'initialize':function(carousel){
				Ext.getStore('Pictures').load(function(pictures) {

					var myitems = [];

					Ext.each(pictures, function(picture) {
						if (!picture.get('image_url')) {
							return;
						}
						myitems.push(
								{xtype:'panel',

							     listeners : {
								            painted : function(panel) {
								                var el = panel.element;
								                    el.on('tap', function(e, t) {

								                        	this.getParent().onTap(picture.data.id);

								                    }, panel);
								            }
								        },	
								items:[{html:'<img src="'+picture.data.image_url[0]+'"/>'+'<br>'+picture.data.title  }
								      ]}	);
					}); 

					carousel.setItems(myitems);

                               setInterval(function(){
						if(i<carousel.getItems().length)
					    {
					        i+=1;
					        carousel.setActiveItem(i);
					    }
					    else
					    {
					    	carousel.setActiveItem(0);
					      i=0;
					    }
					},1000);
				});
			}

		},
	},
	onTap:function(id){
		//debugger;
		 var  store= Ext.getStore('Pictures');
		 var data=store.findRecord('id',id).getData();
		var menu= Ext.create('SmartMenu.view.tips.SeasonDetails',{fullscreen: true,data: data});
		 Ext.getCmp('home_nav').setActiveItem(menu);
	}
});