Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,711
    Vote Rating
    104
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default [3.2] Ext.ux.slider.Highlight - A slider background color plugin

    [3.2] Ext.ux.slider.Highlight - A slider background color plugin


    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.

    Untitled.png

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

    PS. Not very well tested

    JS:
    Code:
    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:
    Code:
    .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;
    }
    Attached Files

  2. #2
    Sencha Premium Member
    Join Date
    Jul 2008
    Location
    Melbourne, Australia
    Posts
    77
    Vote Rating
    0
    DamianHartin is on a distinguished road

      0  

    Default


    Nice one - thanks This just came in handy

  3. #3
    Ext User
    Join Date
    Jun 2010
    Posts
    8
    Vote Rating
    0
    smithloganj is on a distinguished road

      0  

    Default


    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:

    Code:
        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!!

  4. #4
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,711
    Vote Rating
    104
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


    It should say "this.slider" instead of just "slider". Updating source now.

  5. #5
    Sencha User
    Join Date
    Jul 2009
    Posts
    24
    Vote Rating
    0
    bbg is on a distinguished road

      0  

    Default


    This slider is what i've been looking for.
    Why don't you implement this range slider in GXT?

  6. #6
    Sencha User
    Join Date
    Aug 2011
    Posts
    2
    Vote Rating
    0
    macak82 is on a distinguished road

      0  

    Default


    I also need this in GXT. Please!

  7. #7
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,711
    Vote Rating
    104
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


    Not very skilled in the art of GXT I'm afraid, try asking in the GXT help forums...

  8. #8
    Sencha User
    Join Date
    Apr 2008
    Posts
    141
    Vote Rating
    0
    armandoxxx is on a distinguished road

      0  

    Default error still here :(

    error still here :(


    Hey man

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

    Code:
    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
    Code:
    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

  9. #9
    Sencha User
    Join Date
    Apr 2008
    Posts
    141
    Vote Rating
    0
    armandoxxx is on a distinguished road

      0  

    Default please check ...

    please check ...


    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.

    Code:
    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

Similar Threads

  1. Ext.ux.SliderFill 2.0 - A plugin for Ext.Slider widget
    By artalat in forum Ext 3.x: User Extensions and Plugins
    Replies: 4
    Last Post: 7 Jun 2010, 4:11 AM
  2. Ext.Slider Help
    By vocabo in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 16 Nov 2009, 8:10 AM
  3. Ext.Slider - Changing the range of an existing slider
    By srininara in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 24 Jun 2009, 3:49 AM

Thread Participants: 5