由于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;
}
});