Threaded View
-
21 Jul 2011 12:52 PM #1
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:- 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.
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
Steps to reproduce the problem: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() }); });- 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
Thank you for reporting this bug. We will make it our priority to review this report.


Reply With Quote