PDA

View Full Version : [3.2] Ext.ux.slider.Highlight - A slider background color plugin



mankz
29 Jun 2010, 11:30 AM
Here's a basic plugin which adds color to the background area between two slider handles. Only intented for use with 2 slider handles. The color is defined in the CSS but can also be updated by using the setColor method.

21173

Drop the attached folder into the examples folder of Ext 3.2.

PS. Not very well tested :)

JS:


Ext.ns('Ext.ux.slider');

Ext.ux.slider.Highlight = Ext.extend(Object, {

init: function(slider) {
this.slider = slider;
var that = this;

// Overwrite moveThumb method to update element after animated slide
if (slider.vertical) {
slider.moveThumb = function(index, v, animate) {
var thumb = this.thumbs[index],
el = thumb.el;

if (!animate || this.animate === false) {
el.setBottom(v);
} else {
el.shift({bottom: v, stopFx: true, duration:.35, callback : that.syncElementSize, scope : that});
}
}
} else {
slider.moveThumb = function(index, v, animate){
var thumb = this.thumbs[index].el;

if(!animate || this.animate === false){
thumb.setLeft(v);
}else{
thumb.shift({left: v, stopFx: true, duration:.35, callback : that.syncElementSize, scope : that});
}
};
}

slider.on({
scope : this,
afterrender : this.onAfterRender,
drag : this.syncElementSize,
dragend : this.syncElementSize,
changecomplete : this.syncElementSize,
destroy : this.destroy
});
},

onAfterRender : function(s) {
this.el = s.innerEl.createChild({
cls : 'ext-ux-slider-highlight'
});
this.syncElementSize();
},

syncElementSize : function() {
var s = this.slider;

if (s.vertical) {
var thumb1Bottom = s.thumbs[0].el.getBottom(true),
thumb2Bottom = s.thumbs[1].el.getBottom(true),
thumb1Top = s.thumbs[0].el.getTop(true),
thumb2Top = s.thumbs[1].el.getTop(true),
highlightTop = Math.min(thumb1Bottom, thumb2Bottom);

this.el.setTop(highlightTop);
this.el.setHeight(Math.max(thumb1Top, thumb2Top) - highlightTop);
} else {
var thumb1Right = s.thumbs[0].el.getRight(true),
thumb2Right = s.thumbs[1].el.getRight(true),
thumb1Left = s.thumbs[0].el.getLeft(true),
thumb2Left = s.thumbs[1].el.getLeft(true),
highlightLeft = Math.min(thumb1Right, thumb2Right);

this.el.setLeft(highlightLeft);
this.el.setWidth(Math.max(thumb1Left, thumb2Left) - highlightLeft);
}
},

destroy : function() {
this.slider.un({
scope : this,
afterrender : this.onRender,
drag : this.syncElementSize,
dragend : this.syncElementSize,
changecomplete : this.syncElementSize,
destroy : this.destroy
});
this.el.destroy();
},

setColor : function(color) {
this.el.setStyle('background-color', color);
}
});




CSS:


.ext-ux-slider-highlight {
position: absolute;
background : yellow;
overflow:hidden;
}

.x-slider-vert .ext-ux-slider-highlight {
width:6px;
left:8px;
}

.x-slider-horz .ext-ux-slider-highlight {
height:6px;
top:8px;
}

DamianHartin
22 Jul 2010, 9:19 PM
Nice one - thanks :) This just came in handy

smithloganj
22 Sep 2010, 5:50 AM
Hi,
This extension has been working great for me, but I recently noticed that if you attempt to destroy a slider using the highlight, a javascript error occurs in the extension code where "slider is not defined" on the slider.un line of this function:



destroy : function() {
slider.un({
scope : this,
afterrender : this.onRender,
drag : this.syncElementSize,
dragend : this.syncElementSize,
changecomplete : this.syncElementSize,
destroy : this.destroy
});
this.el.destroy();
}



Does anyone know how to fix this? Or even how to just avoid it by first removing all plugins from the slider, and then destroying it?

Thanks!!

mankz
22 Sep 2010, 5:51 AM
It should say "this.slider" instead of just "slider". Updating source now. :)

bbg
14 Aug 2011, 2:54 AM
This slider is what i've been looking for.
Why don't you implement this range slider in GXT?

macak82
28 Aug 2011, 11:22 PM
I also need this in GXT. Please!

mankz
28 Aug 2011, 11:25 PM
Not very skilled in the art of GXT I'm afraid, try asking in the GXT help forums...

armandoxxx
8 Feb 2012, 4:32 AM
Hey man

I'm still getting the error when destroying slider with your plugin !



Uncaught TypeError: Object #<Object> has no method 'toLowerCase'
h.Observable.removeListenerext-all.js:7
Ext.ux.slider.Highlight.Ext.extend.destroyext.ux.slider.highlight.js:75
h.Event.fire


any help would be appreciated

code from your plugin


destroy : function() {
this.slider.un({
scope : this,
afterrender : this.onRender,
drag : this.syncElementSize,
dragend : this.syncElementSize,
changecomplete : this.syncElementSize,
destroy : this.destroy
});
this.el.destroy();
}


Kind regards

Armando

armandoxxx
8 Feb 2012, 5:03 AM
Hey man

I've updated this code a little . please check and post reply of your oppinion

your code is still inside, it's just commented out.



Ext.ns('Ext.ux.slider');

Ext.ux.slider.Highlight = Ext.extend(Object, {

init: function(slider) {
this.slider = slider;
var that = this;

// Overwrite moveThumb method to update element after animated slide
if (slider.vertical) {
slider.moveThumb = function(index, v, animate) {
var thumb = this.thumbs[index],
el = thumb.el;

if (!animate || this.animate === false) {
el.setBottom(v);
} else {
el.shift({bottom: v, stopFx: true, duration:.35, callback : that.syncElementSize, scope : that});
}
}
} else {
slider.moveThumb = function(index, v, animate){
var thumb = this.thumbs[index].el;

if(!animate || this.animate === false){
thumb.setLeft(v);
}else{
thumb.shift({left: v, stopFx: true, duration:.35, callback : that.syncElementSize, scope : that});
}
};
}

this.slider.on('afterrender', this.onAfterRender, this);
this.slider.on('drag', this.syncElementSize, this);
this.slider.on('dragend', this.syncElementSize, this);
this.slider.on('changecomplete', this.syncElementSize, this);
this.slider.on('destroy', this.destroy, this);
/*
slider.on({
scope : this,
afterrender : this.onAfterRender,
drag : this.syncElementSize,
dragend : this.syncElementSize,
changecomplete : this.syncElementSize,
destroy : this.destroy
});*/
},

onAfterRender : function(s) {
this.el = s.innerEl.createChild({
cls : 'ext-ux-slider-highlight'
});
this.syncElementSize();
},

syncElementSize : function() {
var s = this.slider;

if (s.vertical) {
var thumb1Bottom = s.thumbs[0].el.getBottom(true),
thumb2Bottom = s.thumbs[1].el.getBottom(true),
thumb1Top = s.thumbs[0].el.getTop(true),
thumb2Top = s.thumbs[1].el.getTop(true),
highlightTop = Math.min(thumb1Bottom, thumb2Bottom);

this.el.setTop(highlightTop);
this.el.setHeight(Math.max(thumb1Top, thumb2Top) - highlightTop);
} else {
var thumb1Right = s.thumbs[0].el.getRight(true),
thumb2Right = s.thumbs[1].el.getRight(true),
thumb1Left = s.thumbs[0].el.getLeft(true),
thumb2Left = s.thumbs[1].el.getLeft(true),
highlightLeft = Math.min(thumb1Right, thumb2Right);

this.el.setLeft(highlightLeft);
this.el.setWidth(Math.max(thumb1Left, thumb2Left) - highlightLeft);
}
},

destroy : function() {
this.slider.un('afterrender', this.onAfterRender, this);
this.slider.un('drag', this.syncElementSize, this);
this.slider.un('dragend', this.syncElementSize, this);
this.slider.un('changecomplete', this.syncElementSize, this);
this.slider.un('destroy', this.destroy, this);
/* this.slider.un({
scope : this,
afterrender : this.onAfterRender,
drag : this.syncElementSize,
dragend : this.syncElementSize,
changecomplete : this.syncElementSize,
destroy : this.destroy
});*/
Ext.destroy(this.el);
//this.el.destroy();
}
});




kind regards

Armando