【Extjs学习二】Extjs2小控件slideplayer

这下子左右上下的tab都可以轻松添加到web页面上去了，目前没有添加自动播放功能，这2天添好了再放新的上来

Ext.onReady(function(){

	Ext.ux.SlideBox = Ext.extend(Object, {
		constructor : function(cfg) {
			Ext.ux.SlideBox.superclass.constructor.call(this, cfg);
			Ext.apply(this,cfg);
			this.aciveIndex = this.aciveIndex || 0;
			this.boxes = Ext.select('li', false, this.boxid);
			this.boxes.each(function(box,sidebox, index) {
				box.set( {
					'sidebox:index' : index
				});
				box.on('mouseover', this.onMouseover,this);
			}, this);
			this.setActiveBox(this.aciveIndex);
		},
		setActiveBox:function(index){			
			this.setClsActiveOrNot(this.aciveIndex,false);
			this.setClsActiveOrNot(index,true);
			this.aciveIndex = index;			
		},
		setClsActiveOrNot:function(index,bvar){
			var boxTitle = this.boxes.item(index);
			var boxConfig = Ext.util.JSON.decode(boxTitle.getAttributeNS('sidebox','config'));	
			var boxBody = Ext.get(boxConfig['bodyId']);
			if(bvar){
				boxTitle.replaceClass(boxConfig['deactivecls'],boxConfig['activecls']);
				boxBody.replaceClass(boxConfig['bodyDeactivecls'],boxConfig['bodyActivecls']);				
			}else{
				boxTitle.replaceClass(boxConfig['activecls'],boxConfig['deactivecls']);
				boxBody.replaceClass(boxConfig['bodyActivecls'],boxConfig['bodyDeactivecls']);				
			}		
		},
		onMouseover:function(e,elm){
			var index = Ext.fly(elm).getAttributeNS('sidebox','index');
			if(!index){
				index = Ext.fly(elm).parent('li').getAttributeNS('sidebox','index');
			}
			if(index){this.setActiveBox(index);}
		}		
	})

	
	var sidebox = new Ext.ux.SlideBox({title:'hello',boxid:'slideBox'});

});