Ext.Slider not working properly in IE9

**kky** · 21 Jul 2011 12:52 PM

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:

With IE9 only, I am unable to drag any of the slider bars when <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> is specified.

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

**japanick** · 3 Aug 2011 3:01 PM

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.

**KennethLiu** · 5 Aug 2011 1:20 AM

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();
}
});

**kky** · 12 Aug 2011 10:22 AM

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

**Darklight** · 20 Sep 2011 7:09 AM

thanks for the IE9 fix!

**Vujita** · 21 Jun 2012 12:43 PM

Great fix! I spent a day hunting down this issue

Originally Posted by kky

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

**rborg** · 27 Jun 2012 5:45 PM

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

Ext.Slider not working properly in IE9

Thread Tools

Search Thread

Display

Hybrid View

Ext.Slider not working properly in IE9

Ext.Slider not working properly in IE9

A solution to extjs 3.3

A solution to extjs 3.3