Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    9
    Vote Rating
    0
    kky is on a distinguished road

      0  

    Post Ext.Slider not working properly in IE9

    Ext.Slider not working properly in IE9


    Ext version tested:
    • Ext 3.4.0

    Adapter used:
    • ext-base

    css used:
    • ext-all.css
    • slider.css
    • examples.css

    Browser versions tested against:
    • IE9

    Operating System:
    • Windows Server 2008

    Description:Test Case:

    I was able to replicate this using the slider example provided with Ext 3.4.0 by adding <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> to the top of slider.html

    Code:
    Slider.html:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Ext Slider Example</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
     
        <!-- GC -->
        <!-- LIBS -->
        <script type="text/javascript" src="../../adapter/ext/ext-base-debug.js"></script>
        <!-- ENDLIBS -->
     
        <script type="text/javascript" src="../../ext-all-debug.js"></script>
        <script type="text/javascript" src="slider.js"></script>
        <link rel="stylesheet" type="text/css" href="slider.css">
     
        <!-- Common Styles for the examples -->
        <link rel="stylesheet" type="text/css" href="../shared/examples.css">
    </head>
    <body>
    <script type="text/javascript" src="../shared/examples.js"></script>
    <!-- EXAMPLES -->
    <h1>Ext Slider Example</h1>
    <p>Sliders support keyboard adjustments, configurable snapping, axis clicking and animation.</p>
    <p>The source is not minified - see <a href="slider.js">slider.js</a></p>
    <h3>Basic Slider</h3>
    <div id="basic-slider"></div>
    <br/>
    <h3>Snapping Slider</h3>
    <div id="increment-slider"></div>
    <br/>
    <h3>Vertical Slider</h3>
    <div id="vertical-slider"></div>
    <br/>
    <h3>Slider with tip</h3>
    <div id="tip-slider"></div>
    <br/>
    <h3>Slider with custom tip</h3>
    <div id="custom-tip-slider"></div>
    <br/>
    <h3>CSS Customized Slider</h3>
    <div id="custom-slider"></div>
     
    <h3>Slider with multiple thumbs</h3>
    <div id="multi-slider-horizontal"></div>
     
    <h3>Vertical Slider with multiple thumbs</h3>
    <div id="multi-slider-vertical"></div>
     
    <!-- extra space for scrolling -->
    <div style="height:150px;"></div>
    </body>
    </html>
     
    Slider.js:
    
    /*!
     * Ext JS Library 3.4.0
     * Copyright(c) 2006-2011 Sencha Inc.
     * licensing@sencha.com
     * http://www.sencha.com/license
     */
    Ext.onReady(function(){
    
        new Ext.Slider({
            renderTo: 'basic-slider',
            width: 214,
            minValue: 0,
            maxValue: 100
        });
    
        new Ext.Slider({
            renderTo: 'increment-slider',
            width: 214,
            value:50,
            increment: 10,
            minValue: 0,
            maxValue: 100
        });
    
        new Ext.Slider({
            renderTo: 'vertical-slider',
            height: 214,
            vertical: true,
            minValue: 0,
            maxValue: 100
        });
    
        new Ext.Slider({
            renderTo: 'tip-slider',
            width: 214,
            minValue: 0,
            maxValue: 100,
            plugins: new Ext.slider.Tip()
        });
    
        var tip = new Ext.slider.Tip({
            getText: function(thumb){
                return String.format('<b>{0}% complete</b>', thumb.value);
            }
        });
    
        new Ext.Slider({
            renderTo: 'custom-tip-slider',
            width: 214,
            increment: 10,
            minValue: 0,
            maxValue: 100,
            plugins: tip
        });
    
        new Ext.Slider({
            renderTo: 'custom-slider',
            width: 214,
            increment: 10,
            minValue: 0,
            maxValue: 100,
            plugins: new Ext.slider.Tip()
        });
        
        new Ext.slider.MultiSlider({
            renderTo: 'multi-slider-horizontal',
            width   : 214,
            minValue: 0,
            maxValue: 100,
            values  : [10, 50, 90],
            plugins : new Ext.slider.Tip()
        });
        
        new Ext.slider.MultiSlider({
            renderTo : 'multi-slider-vertical',
            vertical : true,
            height   : 214,
            minValue: 0,
            maxValue: 100,
            values  : [10, 50, 90],
            plugins : new Ext.slider.Tip()
        });
    });
    Steps to reproduce the problem:
    • After the page loads, try to drag any of the slider bars.

    The result that was expected:
    • Slider bars should be draggable.

    The result that occurs instead:
    • Slider bar does not move.

    Screenshot or Video:
    • None attached

    Debugging already done:
    • Determined that it will work properly in IE9 when the tag is removed.

    Possible fix:
    • not provided

  2. #2
    Sencha User
    Join Date
    Feb 2008
    Posts
    6
    Vote Rating
    0
    japanick is on a distinguished road

      0  

    Default


    I'm also experiencing this issue. Does anyone have a fix for it (assuming the doc type tag stays?). I do not have the luxury of being able to remove that tag in my environment.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    1
    Vote Rating
    0
    KennethLiu is on a distinguished road

      0  

    Default A solution to extjs 3.3

    A solution to extjs 3.3


    In fact, the extjs 3.3 version do not support IE9. I do not know whether it is solved in Extjs 4. Here, I give a solution. It copy the source code in Extjs 3.3 and override some logic in IE9. The source code is following:

    var slider = new Ext.Slider({
    height: 200,
    vertical: true,
    minValue: 0,
    maxValue: 100,
    listeners: {
    change: { scope: this, fn: function (slider, newValue, thumb) {
    }
    },
    dragstart: { scope: this, fn: function (slider, e) {
    }
    },
    drag: { scope: this, fn: function (slider, e) {
    }
    },
    dragend: { scope: this, fn: function (slider, e) {
    }
    }
    },

    addThumb: function(value) {
    var thumb = new Ext.slider.Thumb({
    value : value,
    slider : this,
    index : this.thumbs.length,
    constrain: this.constrainThumbs,

    initEvents: function() {
    var el = this.el;

    el.addClassOnOver('x-slider-thumb-over');

    this.tracker = new Ext.dd.DragTracker({
    onBeforeStart: this.onBeforeDragStart.createDelegate(this),
    onStart : this.onDragStart.createDelegate(this),
    onDrag : this.onDrag.createDelegate(this),
    onEnd : this.onDragEnd.createDelegate(this),
    tolerance : 3,
    autoStart : 300,

    onMouseMove: function(e, target){
    var isIE9 = Ext.isIE && (/msie 9/.test(navigator.userAgent.toLowerCase())) && document.documentMode != 6;

    if (!isIE9)
    {
    if(this.active && Ext.isIE && !e.browserEvent.button){
    e.preventDefault();
    this.onMouseUp(e);
    return;
    }
    }

    e.preventDefault();
    var xy = e.getXY(), s = this.startXY;
    this.lastXY = xy;
    if(!this.active){
    if(Math.abs(s[0]-xy[0]) > this.tolerance || Math.abs(s[1]-xy[1]) > this.tolerance){
    this.triggerStart(e);
    }else{
    return;
    }
    }
    this.fireEvent('mousemove', this, e);
    this.onDrag(e);
    this.fireEvent('drag', this, e);
    }
    });

    this.tracker.initEl(el);
    }
    });
    this.thumbs.push(thumb);

    //render the thumb now if needed
    if (this.rendered) thumb.render();
    }
    });

  4. #4
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    9
    Vote Rating
    0
    kky is on a distinguished road

      0  

    Default


    Thank you, that worked. I decided put your IE9 logic in an override instead.

    Code:
    Ext.override(Ext.dd.DragTracker, {
        onMouseMove: function (e, target) {
            var isIE9 = Ext.isIE && (/msie 9/.test(navigator.userAgent.toLowerCase())) && document.documentMode != 6;
            if (this.active && Ext.isIE && !isIE9 && !e.browserEvent.button) {
                e.preventDefault();
                this.onMouseUp(e);
                return;
            }
            e.preventDefault();
            var xy = e.getXY(), s = this.startXY;
            this.lastXY = xy;
            if (!this.active) {
                if (Math.abs(s[0] - xy[0]) > this.tolerance || Math.abs(s[1] - xy[1]) > this.tolerance) {
                    this.triggerStart(e);
                } else {
                    return;
                }
            }
            this.fireEvent('mousemove', this, e);
            this.onDrag(e);
            this.fireEvent('drag', this, e);
        }
    });

  5. #5
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    186
    Vote Rating
    0
    Darklight is on a distinguished road

      0  

    Default


    thanks for the IE9 fix!

  6. #6
    Sencha User
    Join Date
    Oct 2010
    Location
    Dallas, Texas
    Posts
    5
    Vote Rating
    0
    Vujita is on a distinguished road

      0  

    Default


    Great fix! I spent a day hunting down this issue
    Quote Originally Posted by kky View Post
    Thank you, that worked. I decided put your IE9 logic in an override instead.

    Code:
    Ext.override(Ext.dd.DragTracker, {
        onMouseMove: function (e, target) {
            var isIE9 = Ext.isIE && (/msie 9/.test(navigator.userAgent.toLowerCase())) && document.documentMode != 6;
            if (this.active && Ext.isIE && !isIE9 && !e.browserEvent.button) {
                e.preventDefault();
                this.onMouseUp(e);
                return;
            }
            e.preventDefault();
            var xy = e.getXY(), s = this.startXY;
            this.lastXY = xy;
            if (!this.active) {
                if (Math.abs(s[0] - xy[0]) > this.tolerance || Math.abs(s[1] - xy[1]) > this.tolerance) {
                    this.triggerStart(e);
                } else {
                    return;
                }
            }
            this.fireEvent('mousemove', this, e);
            this.onDrag(e);
            this.fireEvent('drag', this, e);
        }
    });

  7. #7
    Sencha User
    Join Date
    Jan 2011
    Posts
    9
    Vote Rating
    0
    rborg is on a distinguished road

      0  

    Default


    thanks guys, awesome, just what I needed. i too spent a lot of time trying to resolve the issue

  8. #8
    Sencha User Hanni Sullivan's Avatar
    Join Date
    May 2011
    Location
    Constance, Germany
    Posts
    84
    Vote Rating
    4
    Hanni Sullivan is on a distinguished road

      0  

    Default


    "Big up!" for the fix. I was pulling my hair out over this.

  9. #9
    Sencha User
    Join Date
    Nov 2010
    Posts
    2
    Vote Rating
    0
    fsiatama is on a distinguished road

      0  

    Default


    Gracias

  10. #10
    Sencha User
    Join Date
    May 2010
    Posts
    69
    Vote Rating
    0
    paweluz is on a distinguished road

      0  

    Default


    Thanks you very very much!!!

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..."