Carousel 使用

/**  
 * @Author sai  
 *  Carousel
 */   
Ext.define('SmartMenu.view.members.WeddCarousel', {
	extend: 'Ext.Panel',
	xtype:'WeddCarousel',

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

	config: {
		direction: 'horizontal',
		layout: { type: 'vbox'},
		listeners: {
			'initialize':function(panel){
			 var 	d= this.getData();
			 var carousel_items = [];
			 for (j = 0; j < d.length; j++) { 
				var img= '[img]' + d[j].url + '[/img]';
				carousel_items.push({html:img});
			 }
			 	var items=[{xtype: 'carousel', styleHtmlContent: true,items:carousel_items,flex:2,
			 		listeners:{'activeitemchange':function(){
			 			var i = this.getActiveIndex();
			            var no=parseInt(i)+parseInt(1);
			            var  d=this.getParent().getData();
			 			 var items=this.getParent().getItems();
			 			items.items[1].setHtml('<div style="font-size:13px;line-height:18px;"><div style="text-align:right; line-height:30px; font-size:14px; font-weight:bold;"><span style="float:left; width:88%; height:30px; overflow:hidden; text-align:left;">' + d[i].title + '</span>' + no + '/' + d.length + '</div>' + d[i].description + '</div>');
			 		},
			 		'activate' : function(panel) {  
	                    var el = panel.element;  
	                        el.on('tap', function(e, t) {  
	                            var image = e.getTarget('img');  
	                            if (image) {  
	                               var items=this.getParent().getItems();
	                               if(items.items[1].getHidden()){items.items[1].setHidden(false);}else{
	                               items.items[1].setHidden(true);}
	                               var  bar=this.getParent().getParent().getTabBar();
	                               if(bar.getHidden()){
	                            	   bar.setHidden(false);
	                               }else{
	                            	   bar.setHidden(true);
	                               }
	                            }  
	                        }, panel);  
	                }



			 		}
			 		},{xtype:'sheet',cls:'wedd_carousel_sheet',masked :false,modal:false,enter:'bottom',exit:'bottom',dock:'bottom', html:'<div style="font-size:13px;line-height:18px;"><div style="text-align:right; line-height:30px; font-size:14px; font-weight:bold;"><span style="float:left; width:88%; height:30px; overflow:hidden; text-align:left;">' + d[0].title + '</span>' + 1 + '/' + d.length + '</div>' + d[0].description + '</div>'}];
			 	panel.setItems(items);
			}
		}

	}


});