You found a bug! We've classified it as EXTJS-7654 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    38
    Vote Rating
    1
    andyjl is on a distinguished road

      0  

    Default [4.1.x] IE: Selecting item in Ext.view.View when scrolled down makes scrollbar jump

    [4.1.x] IE: Selecting item in Ext.view.View when scrolled down makes scrollbar jump


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.1.1
    • Ext 4.1.3
    Browser versions tested against:
    • IE8
    • IE9
    DOCTYPE tested against:
    • HTML5
    Description:
    • In IE, if I select an item in an Ext.view.View when it's scrolled down, the scroll bar jumps to the top. This is not a problem in Firefox or Google Chrome.
    Steps to reproduce the problem:
    • Run the code in the test case (or check out the live preview in the Ext.view.View documentation)
    • Resize the browser so that the view has to scroll
    • Scroll down and select one of the items in the view
    The result that was expected:
    • The scrollbar should not have jumped up - it should have stayed in place
    The result that occurs instead:
    • The scrollbar jumped to the top
    Test Case:

    Code:
    Ext.define('Image', {
        extend: 'Ext.data.Model',
        fields: [
            { name:'src', type:'string' },
            { name:'caption', type:'string' }
        ]
    });
    
    
    Ext.create('Ext.data.Store', {
        id:'imagesStore',
        model: 'Image',
        data: [
            { src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' },
            { src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
            { src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
            { src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }
        ]
    });
    
    
    var imageTpl = new Ext.XTemplate(
        '<tpl for=".">',
            '<div style="margin-bottom: 10px;" class="thumb-wrap">',
              '<img src="{src}" />',
              '<br/><span>{caption}</span>',
            '</div>',
        '</tpl>'
    );
    
    
    Ext.create('Ext.view.View', {
        store: Ext.data.StoreManager.lookup('imagesStore'),
        tpl: imageTpl,
        itemSelector: 'div.thumb-wrap',
        emptyText: 'No images available',
        renderTo: Ext.getBody()
    });

    HELPFUL INFORMATION

    See this URL for live test case: http://docs.sencha.com/ext-js/#!/api/Ext.view.View - view the live preview of the example

    Debugging already done:
    • none
    Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • Windows 7 SP1 64-bit

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thank you for the report.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread