扩展Ext的Slider组件

 由于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 overrideonMouseDown: function(){},//private overridecb_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 trueelsereturn false}*/alert(max+'--'+min);return {max: t_values[tm_size+1], min: t_values[tm_size-1]};}}}return null;}});