【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'});

});

 

 

//已添加自动播放功能：


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);
				if(this.enableSideplay){				
					box.on('mouseout', this.setIntervalFuc, this);
				}
			}, this);
			this.setActiveBox(this.aciveIndex);
			if(this.enableSideplay){	
				this.intervalTime = this.intervalTime || 2000;		
				this.setIntervalFuc();	
				this.box = Ext.get(this.boxid);
				this.box.on('mouseover', this.clearIntervalFuc, this);
				this.box.on('mouseout', this.setIntervalFuc, this);
			}
		},
		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){
			if(this.enableSideplay){this.clearIntervalFuc();}
			var index = Ext.fly(elm).getAttributeNS('sidebox','index');
			if(!index){
				index = Ext.fly(elm).parent('li').getAttributeNS('sidebox','index');
			}
			if(index){this.setActiveBox(index);}
		},	
		setIntervalFuc : function() {
			if(!this.intervalFuc){
				this.intervalFuc = setInterval(this.showWhich.createDelegate(this),this.intervalTime);
			}
		},
		clearIntervalFuc : function(e, elm, o, p, q) {
			clearInterval(this.intervalFuc);
			this.intervalFuc = null;
		},
		showWhich : function() {
			var index = this.aciveIndex;
			index++;
			if (index >= this.boxes.getCount()){
				index = 0;
			}
			this.setActiveBox(index);
		}
	})

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

});

 

对信息滚动、图片滚动、相册等网页效果有兴趣的可以一起学习，打算做些常用的用到自己的网站上去，感觉ext只使用jquery等小js库的功能，文件也不大，用起来更顺手.