Hybrid View

    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar