由于Ext提供的slider组件只存在一个滑块,工作中需要可以动态添加滑块,因此对slider组件进行扩展实现添加多滑块功能。 Ext.ns( "Ext.neza" ); /** * @class Ext.neza.DynamicSlider * @extends Ext.Slider */ Ext.neza.DynamicSlider = Ext.extend(Ext.Slider, { initComponent: function(){ Ext.neza.DynamicSlider.superclass.initComponent.call(this); this.menu = new Ext.menu.Menu(); this.addMenuItem = new Ext.menu.Item({text: "添加"}); this.removeMenuItem = new Ext.menu.Item({text: "移除"}); this.menu.add(this.addMenuItem, this.removeMenuItem); this.trackerMemory = []; //tracker memory }, initEvents : function(thumb, focusEl){ thumb = thumb || this.thumb; focusEl = focusEl || this.focusEl; thumb.addClassOnOver('x-slider-thumb-over'); this.mon(this.el, 'mousedown', this.onMouseDown, this); this.mon(this.el, 'keydown', this.onKeyDown, this); focusEl.swallowEvent("click", true); var tracker = new Ext.dd.DragTracker(); Ext.apply(tracker, { onBeforeStart: this.onBeforeDragStart.createDelegate(this) ,onStart: this.cb_onDragStart(thumb).createDelegate(this) ,onDrag: this.cb_onDrag(tracker).createDelegate(this) ,onEnd: this.cb_onDragEnd(thumb).createDelegate(this) ,tolerance: 3 ,autoStart: 300 }); tracker.initEl(thumb); this.on('beforedestroy', tracker.destroy, tracker); this.mon(this.innerEl, 'contextmenu', this.showMenu, this, {stopEvent : true}); this.mon(this.addMenuItem, 'click', this.addThumb, this); this.trackerMemory.push(tracker); }, showMenu: function(e){ if (!this.menu) return false; this.menu.showAt(e.getXY()); return false; }, renderBlock: function(){ var block = { cls:'x-slider-inner',cn:[{cls:'x-slider-thumb'},{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}] }; var div = document.createElement('div'); return Ext.DomHelper.overwrite(div, block, true); }, addThumb: function(){ var slider_inner = this.innerEl; var t_inner = this.renderBlock(); var thumb = t_inner.first(); var focusEl = thumb.next(); slider_inner.appendChild(thumb); slider_inner.appendChild(focusEl); this.initEvents(thumb, focusEl); //this.currentThumb = thumb; //this.moveThumb(0, false); //this.currentThumb = null; }, moveThumb: function(v, animate){ var thumb = this.currentThumb || this.thumb; if(!animate || this.animate === false){ thumb.setLeft(v); }else{ thumb.shift({left: v, stopFx: true, duration:.35}); } }, //private override onMouseDown: function(){}, //private override cb_onDragStart: function(thumb){ return function(e){ thumb.addClass('x-slider-thumb-drag'); this.dragging = true; this.dragStartValue = this.value; this.fireEvent('dragstart', this, e); this.currentThumb = thumb; } }, cb_onDrag: function(tracker){ return function(e){ var pos = this.innerEl.translatePoints(tracker.getXY()); var v = Math.round(this.reverseValue(pos.left)); //if (Math.round(this.reverseValue(pos.left)) < 50) //if (this.checkRange(Math.round(this.reverseValue(pos.left)))) { //var range = this.getRange(v); //if (range == null || !range.max || range.max == 0 || v <= range.max) this.setValue(v, false); this.fireEvent('drag', this, e); //} //alert(Math.round(this.reverseValue(pos.left))); /*for (var i = 0, len = this.trackerMemory.length; i < len; i++) { var _pos = this.innerEl.translatePoints(this.trackerMemory[i].getXY()); alert( Math.round(this.reverseValue(_pos.left)) ); }*/ } }, cb_onDragEnd: function(thumb){ return function(e){ thumb.removeClass('x-slider-thumb-drag'); this.dragging = false; this.fireEvent('dragend', this, e); if(this.dragStartValue != this.value){ this.fireEvent('changecomplete', this, this.value); } //alert(this.value); this.currentThumb = null; } }, getRange: function(v){ var t_values = []; var t_tm = this.trackerMemory; var tm_size = this.trackerMemory.length; if (tm_size > 1) { while (tm_size--) { var tracker = t_tm[tm_size]; var pos = this.innerEl.translatePoints(tracker.getXY()); var value = Math.round(this.reverseValue(pos.left)); value = isNaN(value) ? 0 : value; alert(value.constrain(this.minValue, this.maxValue)); t_values.push(value.constrain(this.minValue, this.maxValue)); } //alert(v.constrain(this.minValue, this.maxValue)+'---'+t_values.sort()); t_values.sort(); var size = t_values.length; alert(v +'--'+ t_values+'--'+size); while (size--) { if (t_values[size] == v) { var max = t_values[tm_size+1]; var min = t_values[tm_size-1]; /*if (!isNaN(max)) { if (v < max) return true else return false }*/ alert(max+'--'+min); return {max: t_values[tm_size+1], min: t_values[tm_size-1]}; } } } return null; } });