1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    4
    Vote Rating
    0
    TranceGeniK is on a distinguished road

      0  

    Question Vertical & Area Slider

    Vertical & Area Slider


    Hi,

    I have to make a 2d area slider, which controls 2 classic sliders; 1 horizontal for the x position in the area, and 1 vertical for the y.
    I'm new to Sencha and Ext. I'v realized almost all what I wanted to do, but this is much more complicated and any help would be appreciated!
    If it can help, someone as already made it in Ext, but i don't really understand all this code and the internal structure of this framework : http://www.sencha.com/learn/legacy/Extension:Slider or code below

    Code:
    /**
     * Class Ext.ux.SlideZone
     * @author Jared Gisin
     * @version $Id: Ext.ux.SlideZone.js 93 2007-12-12 04:41:40Z jaredgisin $
     * @license http://www.opensource.org/licenses/mit-license.php
     *
     * TODO: make sure slider limits work when snap = 1 or snap < slider width/height
     * TODO: API to dynamically modify the snap
     * TODO: zone with slider zone responds to click and keypress
     * TODO: API to programatically set slider value with animation
     *
     */
    
    
    Ext.ux.SlideZone = function(id, config) {
        if(id) {
            Ext.apply(this, config);
            this.init(id, config || {});
        } else {
            return false;
        }
    }
    
    
    Ext.extend(Ext.ux.SlideZone, Ext.BoxComponent, {
        size: 100,
        sliderSnap: [0],
        type: 'horizontal',
        sliderWidth: 20,
        sliderHeight: 20,
        cls: null,
        minValue: 0,
        maxValue: 100,
        allowSliderCrossing: true,
        value: null,
    
    
        init: function(id, config) {
            this.size = this.size instanceof Array ? this.size : [this.size];
            this.minValue = this.minValue instanceof Array ? this.minValue : [this.minValue];
            this.maxValue = this.maxValue instanceof Array ? this.maxValue : [this.maxValue];
            this.sliderSnap = this.sliderSnap instanceof Array ? this.sliderSnap : [this.sliderSnap];
    
    
            this.el = Ext.DomHelper.append(Ext.get(id),  { tag: 'div',
                            id: Ext.id(),
                            style: 'position: relative; '
                             }, true);
            this.el.addClass('x-slide-zone-' + this.type);
            this.el.addClass(this.cls);
    
    
            switch(this.type) {
                case 'horizontal':
                    this.sliderSize = [this.sliderWidth];
                    this.el.applyStyles({width:this.size[0] + 'px'});
                    this.el.lowLimit = [this.el.getX()];
                    this.el.highLimit = [this.el.getRight()];
                    break;
    
    
                case 'vertical':
                    this.sliderSize = [this.sliderHeight]
                    this.el.applyStyles({height:this.size[0] + 'px'});
                    this.el.lowLimit = [this.el.getY()];
                    this.el.highLimit = [this.el.getBottom()];
                    break;
    
    
                case 'area':
                    this.sliderSize = [this.sliderWidth, this.sliderHeight];
                    this.el.applyStyles({width:this.size[0] + 'px'});
                    this.el.applyStyles({height:this.size[1] + 'px'});
                    this.el.lowLimit = this.el.getXY();
                    this.el.highLimit = [this.el.getRight(), this.el.getBottom()];
                    break
            }
    
    
            //normalize width/height for slider centering calculations
            var l = this.sliderSize.length;
            for(var i = 0; i < l; i++) {
                this.sliderSize[i] = this.sliderSize[i] % 2 ? this.sliderSize[i] + 1: this.sliderSize[i]
            }
    
    
    
    
            var s = this.sliders;
            this.sliders = new Ext.util.MixedCollection();
            if(s){
                this.add.apply(this, s);
            }
    
    
        },
    
    
        add: function(){
            var a = arguments, l = a.length
            for(var i = 0; i < l; i++){
                var el = a[i];
                if (el instanceof Ext.ux.Slider) {
                    this.initSlider(el);
                    this.sliders.add(el)
                } else if (typeof el == 'object') {
                    //initalize new slider and add to the items list
                    var s = new Ext.ux.ThumbSlider(el);
                    this.initSlider(s);
                    this.sliders.add(s)
                }
            }
            this.updateValues();
            this.updateConstraints();
         },
    
    
        enableCrossing: function() {
            this.allowSliderCrossing = true;
            this.updateConstraints();
        },
    
    
        disableCrossing: function() {
            this.allowSliderCrossing = false;
            this.updateConstraints();
        },
    
    
        getSlider: function(selector) {
            /* Given a slider index or name, returns a slider object
             * @selector   slider index|name
             */
            switch (typeof selector)  {
                case 'number':
                    return this.sliders.items[selector];
                    break;
    
    
                case 'string':
                    var l = this.sliders.length;
                    for(var i = 0; i < l; i++){
                        if(this.sliders.items[i].name ==  selector) return this.sliders.items[i];
                    }
                    break;
            }
        },
    
    
    
    
        updateConstraints: function() {
            if(!this.allowSliderCrossing && this.sliders.length > 1 && this.type != 'area') {
                // multiple sliders exists and sliders can't cross,
                // so we have to take into account the
                // positions of all sliders
                sortFN = function(a,b){
                    var v1 = a.value instanceof Array ? a.value[0] : a.value;
                    var v2 = b.value instanceof Array ? b.value[0] : b.value;
                    return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
                }
                this.sliders.sort('asc',sortFN);//put in order by their value
    
    
                var l = this.sliders.length;
                for (var i=0; i< l; i++) { //forloop required, as we have to get -1 and +1 slider positions
                    var leftTravel = 0, rightTravel = 0;
                    var sliderL = this.sliders.get(i-1);
                    var slider = this.sliders.get(i);
                    var sliderR = this.sliders.get(i+1);
    
    
    
    
                    if (sliderL && sliderR) {
                        if (sliderL instanceof Ext.ux.ThumbSlider) {
                            var leftTravel = slider.getTL()[0] - sliderL.getTL()[0] - this.sliderSnap[0];
                        }
                        if (sliderL instanceof Ext.ux.RangeSlider) {
                            var leftTravel = slider.getTL()[0] - sliderL.getBR()[0] - this.sliderSnap[0];
                        }
                        if (sliderR instanceof Ext.ux.ThumbSlider) {
                            var rightTravel = sliderR.getTL()[0] - slider.getTL()[0] - this.sliderSnap[0];
                        }
                        if (sliderR instanceof Ext.ux.RangeSlider) {
                            var rightTravel = sliderR.getTL()[0] - slider.getBR()[0] - this.sliderSnap[0] ;
                        }
                    } else if(sliderL) {
                        if (sliderL instanceof Ext.ux.ThumbSlider) {
                            var rightTravel = this.el.highLimit[0] - slider.getTL()[0] - ( 0.5 * this.sliderSize[0]) ;
                            var leftTravel = slider.getTL()[0] - sliderL.getTL()[0] - this.sliderSnap[0];
                        }
                        if (sliderL instanceof Ext.ux.RangeSlider) {
                            var rightTravel = this.el.highLimit[0] - slider.getBR()[0];
                            var leftTravel = slider.getTL()[0] - sliderL.getBR()[0] - this.sliderSnap[0];
                        }
                    } else if(sliderR) {
                        if (sliderR instanceof Ext.ux.ThumbSlider) {
                            var leftTravel = slider.getTL()[0] - this.el.lowLimit[0] + ( 0.5 * this.sliderSize[0]);
                            var rightTravel = sliderR.getTL()[0] - slider.getTL()[0] - this.sliderSnap[0] ;
                        }
                        if (sliderR instanceof Ext.ux.RangeSlider) {
                            var leftTravel = slider.getTL()[0] - this.el.lowLimit[0];
                            var rightTravel = sliderR.getTL()[0] - slider.getBR()[0] - this.sliderSnap[0] ;
                        }
                    }
                    if(slider instanceof Ext.ux.RangeSlider) {
                        slider.resizable.leftTravel = [leftTravel];
                        slider.resizable.rightTravel = [rightTravel];
                    }
                    slider.setConstraint([leftTravel], [rightTravel], this.sliderSnap);
                }
            } else {
                var l = this.sliders.length;
                for (var i=0; i< l; i++) {
                    var slider = this.sliders.get(i);
                    if (slider instanceof Ext.ux.ThumbSlider ) {
                        slider.setConstraint([slider.getTL()[0]-this.el.lowLimit[0]  + ( 1/2 * this.sliderSize[0]),
                                              slider.getTL()[1]-this.el.lowLimit[1]  + ( 1/2 * this.sliderSize[1])],
                                    [this.el.highLimit[0]- (slider.getTL()[0] + this.sliderSize[0]) + ( 1/2 * this.sliderSize[0]),
                                     this.el.highLimit[1]- (slider.getTL()[1] + this.sliderSize[1]) + ( 1/2 * this.sliderSize[1]) ],
                                    this.sliderSnap)
                    }
                    if (slider instanceof Ext.ux.RangeSlider) {
                        slider.setConstraint([slider.getTL()[0] - this.el.lowLimit[0],
                                              slider.getTL()[1] - this.el.lowLimit[1]],
                                    [this.el.highLimit[0] - slider.getBR()[0],
                                     this.el.highLimit[1] - slider.getBR()[1] ],
                                    this.sliderSnap)
                    }
                }
            }
        },
    
    
        updateValues: function() {
            var that = this;
            var vals = {};
            this.sliders.each(function(i) {
    
    
                if(this.type == 'area') {
                    if (i instanceof Ext.ux.ThumbSlider) {
                        i.value = [(i.getTL()[0] + 1/2 * that.sliderSize[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0],
                                   (i.getTL()[1] + 1/2 * that.sliderSize[1] - that.el.lowLimit[1]) / (that.size[1]) * (that.maxValue[1] - that.minValue[1]) + that.minValue[1]];
                        i.percent = [parseFloat((i.getTL()[0]  + 1/2 * that.sliderSize[0] - that.el.lowLimit[0]) / (that.size[0]) * 100),
                                     parseFloat((i.getTL()[1]  + 1/2 * that.sliderSize[1] - that.el.lowLimit[1]) / (that.size[1]) * 100)];
                    }
                    if (i instanceof Ext.ux.RangeSlider) {
                        i.value = [[
                                    (i.getTL()[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0],
                                    (i.getBR()[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0]
    
    
    
    
                                   ],[
                                    (i.getTL()[1]  - that.el.lowLimit[1]) / (that.size[1]) * (that.maxValue[1] - that.minValue[1]) + that.minValue[1],
                                    (i.getBR()[1]  - that.el.lowLimit[1]) / (that.size[1]) * (that.maxValue[1] - that.minValue[1]) + that.minValue[1]
                                   ]];
                        i.percent = [[
                                      parseFloat((i.getTL()[0] - that.el.lowLimit[0]) / (that.size[0]) * 100).toFixed(2),
                                      parseFloat((i.getBR()[0] - that.el.lowLimit[0]) / (that.size[0]) * 100).toFixed(2)
                                    ],[
                                      parseFloat((i.getTL()[1] - that.el.lowLimit[1]) / (that.size[1]) * 100).toFixed(2),
                                      parseFloat((i.getBR()[1] - that.el.lowLimit[1]) / (that.size[1]) * 100).toFixed(2)
                                     ]];
                    }
                } else {
                    if (i instanceof Ext.ux.ThumbSlider) {
                        i.value = (i.getTL()[0] + 1/2 * that.sliderSize[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0];
                        i.percent = parseFloat((i.getTL()[0]  + 1/2 * that.sliderSize[0] - that.el.lowLimit[0]) / (that.size[0]) * 100);
                    }
                    if (i instanceof Ext.ux.RangeSlider) {
                        i.value =  [(i.getTL()[0]  - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0],
                                   (i.getBR()[0] - that.el.lowLimit[0]) / (that.size[0]) * (that.maxValue[0] - that.minValue[0]) + that.minValue[0]];
                        i.percent = [  parseFloat((i.getTL()[0]  - that.el.lowLimit[0]) / (that.size[0]) * 100),
                                       parseFloat((i.getBR()[0] - that.el.lowLimit[0]) / (that.size[0]) * 100)];
                    }
                }
                vals[this.name] = this.value;
            });
    
    
            this.value = vals;
        },
    
    
        initSliderPosition: function(slider) {
            /* Sets a sliders's initial position within the slide zone.
             * If slideZone has a sliderSnap set, the slider
             * is positioned at a multiple of the sliderSnap value that is
             * closest where the slider's value would otherwise position it.
             * After positioning, the slider's actual value will be modified
             * in Ext.ux.SlideZone.updateValues()
             * to jibe with the actual position in the slide zone given the
             * sliderSnap constraint.
             */
            var initialPosition = [0,0];
            slider.repositionDelta = [0,0];
            var l = this.type == 'area' ? 2 : 1;
            for(var i=0; i < l; i++ ) {
                /* Make sure initial value is in slider bar range,
                   if it's outside, set to closest limit.
                   The slider value is modified if it's out of range. */
                if(slider.value instanceof Array) {
                    if (slider instanceof Ext.ux.ThumbSlider) {
    
    
                        slider.value[i] = Number(slider.value[i]).constrain(this.minValue[i], this.maxValue[i]);
                        initialPosition[i] = parseInt((slider.value[i] - this.minValue[i]) / (this.maxValue[i] - this.minValue[i]) * this.size[i] + this.el.lowLimit[i]);
                    }
                    if (slider instanceof Ext.ux.RangeSlider) {
                        switch (this.type) {
                            case 'horizontal':
                            case 'vertical':
                                slider.value[i] = Number(slider.value[i]).constrain(this.minValue[i], this.maxValue[i]);
                                initialPosition[i] = parseInt((slider.value[i] - this.minValue[i]) / (this.maxValue[i] - this.minValue[i]) * this.size[i] + this.el.lowLimit[i]);
                                break;
    
    
                            case 'area':
                                slider.value[i][0] = Number(slider.value[i][0]).constrain(this.minValue[i], this.maxValue[i]);
                                slider.value[i][1] = Number(slider.value[i][1]).constrain(this.minValue[i], this.maxValue[i]);
    
    
                                initialPosition[i] = parseInt((slider.value[i][0] - this.minValue[i]) / (this.maxValue[i] - this.minValue[i]) * this.size[i] + this.el.lowLimit[i]);
    
    
                                break;
                        }
                    }
                } else {
                    slider.value = Number(slider.value).constrain(this.minValue[i], this.maxValue[i]);
                    initialPosition[i] = parseInt((slider.value - this.minValue[i]) / (this.maxValue[i] - this.minValue[i]) * this.size[i] + this.el.lowLimit[i]);
                }
    
    
                /* Calculate slider value versus closest snap-to location,
                   and calculate an offset value to apply when positioning it. */
                if (this.sliderSnap[i] > 1) {
                    var positionToSnapDiff = [0,0];
                    positionToSnapDiff[i] = (initialPosition[i] - this.el.lowLimit[i]) % this.sliderSnap[i];
                    if (positionToSnapDiff[i]) {
                        if(positionToSnapDiff[i] < 1/2 * this.sliderSnap[i]) {
                            slider.repositionDelta[i] = -positionToSnapDiff[i];
                        } else {
                            slider.repositionDelta[i] = this.sliderSnap[i] - positionToSnapDiff[i];
                        }
                    }
                }
            }
    
    
            if (slider instanceof Ext.ux.ThumbSlider) {
                slider.setPosition([initialPosition[0] + slider.repositionDelta[0] - (0.5 * this.sliderSize[0]),
                                    initialPosition[1] + slider.repositionDelta[1] - (0.5 * this.sliderSize[1])]);
            }
            if (slider instanceof Ext.ux.RangeSlider) {
    
    
                slider.setPosition([initialPosition[0] + slider.repositionDelta[0],
                                    initialPosition[1] + slider.repositionDelta[1]]);
            }
        },
    
    
        initSlider: function(slider) {
            slider.init(this);
            this.initSliderPosition(slider);
        }
    
    
    });
    
    
    
    
    Ext.ux.Slider = function(config) {
    
    
        Ext.apply(this, config);
    
    
        this.addEvents( {
            "dragstart" : true,
            "dragend" : true,
            "drag" : true,
            "mouseover":true,
            "mouseout":true
        });
    }
    
    
    Ext.extend(Ext.ux.Slider, Ext.BoxComponent, {
        value: 0,
        ddEl: null,
        name: null,
        cls: null,
    
    
        init: function() {
            //Do nothing
        },
    
    
        getTL: function() {
            switch(this.type) {
                case 'horizontal':
                    return [this.el.getX()];
                    break;
    
    
                case 'vertical':
                    return [this.el.getY()];
                    break;
    
    
                case 'area':
                    return this.el.getXY();
                    break;
            }
        },
    
    
        getBR: function() {
            switch(this.type) {
                case 'horizontal':
                    return [this.el.getRight()];
                    break;
    
    
                case 'vertical':
                    return [this.el.getBottom()];
                    break;
    
    
                case 'area':
                    return [this.el.getRight(), this.el.getBottom()];
                    break;
            }
    
    
        },
    
    
        setPosition: function(position) {
            var l = position.length;
            for (i=0; i<l; i++) {
                position[i] = parseInt(position[i]);
            }
    
    
            switch(this.type) {
                case 'horizontal':
                    this.el.setX(position[0]);
                    break;
    
    
                case 'vertical':
                    this.el.setY(position[0]);
                    break;
    
    
                case 'area':
                    this.el.setX(position[0]);
                    this.el.setY(position[1]);
                    break;
            }
        },
    
    
        setConstraint: function(low, high, snap) {
            var l = low.length;
            for (i=0; i<l; i++) {
                low[i] = parseInt(low[i] = low[i] < 0 ? 0 : low[i]);
                high[i] = parseInt(high[i] = high[i] < 0 ? 0 : high[i]);
            }
    
    
    
    
            switch(this.type) {
                case 'horizontal':
                    this.ddEl.setXConstraint(low[0], high[0], snap[0]);
                    this.ddEl.setYConstraint(0, 0);
                    break;
    
    
                case 'vertical':
                    this.ddEl.clearConstraints();
                    this.ddEl.setXConstraint(0, 0);
                    this.ddEl.setYConstraint(low[0], high[0], snap[0]);
                    break;
    
    
                case 'area':
                    this.ddEl.setXConstraint(low[0], high[0], snap[0]);
                    this.ddEl.setYConstraint(low[1], high[1], snap[1]);
                    break;
            }
            this.ddEl.resetConstraints(true);
        }
    
    
    
    
    });
    
    
    Ext.ux.ThumbSlider = function(config) {
        Ext.ux.ThumbSlider.superclass.constructor.call(this, config);
    };
    
    
    
    
    Ext.ux.RangeSlider = function(config) {
        Ext.ux.RangeSlider.superclass.constructor.call(this, config);
    };
    
    
    Ext.extend(Ext.ux.ThumbSlider, Ext.ux.Slider, {
        //init must be passed an instance of a SliderZon e
        init: function(parentSlideZone) {
            this.type = parentSlideZone.type;
    
    
            this.pointer = this.type == 'horizontal' ? 'w-resize' : this.type == 'vertical' ? 'n-resize' : 'move';
    
    
            this.el = Ext.DomHelper.append(parentSlideZone.el,  {
                            tag: 'div',
                            id: Ext.id(),
                            style: 'position:absolute;'+
                                    'overflow: hidden;'
                                    }, true);
            this.el.addClass('x-thumb-slider-' + this.type);
            this.el.addClass(parentSlideZone.cls);
    
    
            this.ddEl = new Ext.dd.DD(this.el);
    
    
            var sliderInstance = this;
            var slideZoneInstance = parentSlideZone;
    
    
            this.el.on('mouseover', function() {
                sliderInstance.fireEvent('mouseover', sliderInstance);
                sliderInstance.el.setStyle('cursor', sliderInstance.pointer);
            });
            this.el.on('mouseout', function() {
                sliderInstance.fireEvent('mouseout', sliderInstance);
                sliderInstance.el.setStyle('cursor', 'default');
            });
            this.ddEl.onMouseDown = function(x, y) {
                sliderInstance.fireEvent('dragstart', sliderInstance);
            };
            this.ddEl.onMouseUp = function(x, y) {
                slideZoneInstance.updateConstraints();
                slideZoneInstance.updateValues();
                sliderInstance.fireEvent('dragend', sliderInstance)
            };
            this.ddEl.onDrag = function(e) {
                slideZoneInstance.updateValues();
                sliderInstance.fireEvent('drag', sliderInstance);
            };
    
    
            Ext.ux.ThumbSlider.superclass.init.call(parentSlideZone);
        }
    });
    
    
    Ext.extend(Ext.ux.RangeSlider, Ext.ux.Slider, {
        init: function(parentSlideZone) {
            this.type = parentSlideZone.type;
    
    
            var el = Ext.DomHelper.append(parentSlideZone.el,  {
                            tag: 'div',
                            id: Ext.id(),
                            style: 'position:absolute;'+
                                    'overflow: hidden;'
                                    }, true);
    
    
            //this.el.addClass(parentSlideZone.cls);
            switch(this.type) {
                case 'horizontal':
                    var w = Math.abs(this.value[0] - this.value[1]) / (parentSlideZone.maxValue - parentSlideZone.minValue) * parentSlideZone.size;
                    var h = parentSlideZone.sliderHeight;
                    var handles = 'e,w';
                    this.pointer = 'w-resize';
                    break;
    
    
                case 'vertical':
                    var w = parentSlideZone.sliderWidth;
                    var h = Math.abs(this.value[0] - this.value[1]) / (parentSlideZone.maxValue - parentSlideZone.minValue) * parentSlideZone.size;
                    var handles = 'n,s';
                    this.pointer = 'n-resize';
                    break;
    
    
                case 'area':
                    var w = Math.abs(this.value[0][0] - this.value[0][1]) / (parentSlideZone.maxValue[0] - parentSlideZone.minValue[0]) * parentSlideZone.size[0];
                    var h = Math.abs(this.value[1][0] - this.value[1][1]) / (parentSlideZone.maxValue[1] - parentSlideZone.minValue[1]) * parentSlideZone.size[1];
                    var handles = 'all';
                    this.pointer = 'move';
                    break;
            }
    
    
            this.resizable = new Ext.Resizable(el, {
                wrap:false,
                pinned:true,
                width: w,
                height: h,
                minWidth: 20,
                widthIncrement: parentSlideZone.sliderSnap[0],
                heightIncrement: parentSlideZone.sliderSnap[1],
                minHeight: 20,
                dynamic: true,
                handles: handles,
                draggable: true,
                transparent: false,
                constrainTo: parentSlideZone.el,
                leftTravel: null,
                rightTravel: null
            });
            var sliderInstance = this;
            var slideZoneInstance = parentSlideZone;
    
    
            this.el = this.resizable.el;
            this.el.addClass('x-range-slider-' + this.type);
            this.el.addClass(this.cls);
            this.ddEl = this.resizable.dd;
    
    
    
    
            this.resizable.on('beforeresize', function() {
                sliderInstance.fireEvent('dragstart', sliderInstance);
            })
    
    
            /* Parts of this.resizable.onMouseMove handler taken from:
             * http://extjs.com/forum/showthread.php?p=23122&highlight=resizable+constrainto#post23122
             */
            this.resizable.onMouseMove = function( e ) {
                    var box = this.constrainTo.getRegion(), tgt = e.getXY();
                    //redefine the constraining box if slider crossing resrictions
                    if(!parentSlideZone.allowSliderCrossing) {
                        if( parentSlideZone.type == 'vertical') {
                                box = {left:   box.left,  right:  box.right,
                                       top:    this.startBox.y - this.leftTravel[0],
                                       bottom: this.startBox.y + this.startBox.height + this.rightTravel[0] }
                        }
                        if( parentSlideZone.type == 'horizontal') {
                                box = {left:   this.startBox.x - this.leftTravel[0],
                                       right:  this.startBox.x + this.startBox.width + this.rightTravel[0],
                                       top:    box.top, bottom: box.bottom }
                        }
                    }
    
    
                    e.xy = [
                        tgt[0] - box.left < 0 ? box.left - this.startBox.x + this.startPoint[0] : tgt[0] - box.right > 0 ? box.right - this.startBox.right + this.startPoint[0] : tgt[0],
                        tgt[1] - box.top < 0 ? box.top - this.startBox.y + this.startPoint[1] : tgt[1] - box.bottom > 0 ? box.bottom - this.startBox.bottom + this.startPoint[1] : tgt[1]
                    ];
    
    
                    Ext.Resizable.prototype.onMouseMove.call(this, e);
                    slideZoneInstance.updateValues();
                    sliderInstance.fireEvent('drag', sliderInstance);
                };
    
    
            this.resizable.on('resize', function(width, height) {
                slideZoneInstance.updateConstraints();
                slideZoneInstance.updateValues();
                sliderInstance.fireEvent('dragend', sliderInstance);
            })
    
    
            this.el.on('mouseover', function() {
                sliderInstance.fireEvent('mouseover', sliderInstance);
                sliderInstance.el.setStyle('cursor', sliderInstance.pointer);
            });
            this.el.on('mouseout', function() {
                sliderInstance.fireEvent('mouseout', sliderInstance);
                sliderInstance.el.setStyle('cursor', 'default');
            });
            this.ddEl.onMouseDown = function(x, y) {
                sliderInstance.fireEvent('dragstart', sliderInstance);
            };
            this.ddEl.onMouseUp = function(x, y) {
                slideZoneInstance.updateConstraints();
                slideZoneInstance.updateValues();
                sliderInstance.fireEvent('dragend', sliderInstance)
            };
            this.ddEl.onDrag = function(e) {
                slideZoneInstance.updateValues();
                sliderInstance.fireEvent('drag', sliderInstance);
            };
    
    
            Ext.ux.ThumbSlider.superclass.init.call(parentSlideZone);
    
    
        }
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,790
    Vote Rating
    833
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I would forget about that. I would look at the current slider and see what you can do to make it vertical.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    4
    Vote Rating
    0
    TranceGeniK is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    I would forget about that. I would look at the current slider and see what you can do to make it vertical.
    I can't forget, I have to do the area slider AND the vertical slider for my job... I have done it with jQuery, but it was really much more simple!

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,790
    Vote Rating
    833
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Ok, then you will probably have a pretty hard time converting something made for Ext JS to Sencha Touch since the code will be very different. As I suggested, look at the slider code for ST1 and see what you can do to make it vertical.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    4
    Vote Rating
    0
    TranceGeniK is on a distinguished road

      0  

    Default


    Okay, thanks for your answers. I have forgotten that as you suggested, it's really much more complicated than I thought. So I came back to jQuery, but the performances are bad on iPad

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi