Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-3994 in 4.2.0.663.
  1. #1
    Sencha User
    Join Date
    Sep 2009
    Posts
    5
    Vote Rating
    0
    bernal.rs is on a distinguished road

      0  

    Question How to prevent extjs grid from scrolling when clicking on a cell ?

    How to prevent extjs grid from scrolling when clicking on a cell ?


    Hi,

    I am currently using the grid component with Extjs 4 based on the editable grid example. I would like to have a link associated with each cell so that when I click on a cell it takes me to another page. However, when there is a vertical scroll that is trigered on the page when clicking on the link.

    e.g. try reducing the size of http://dev.sencha.com/deploy/ext-4.0...l-editing.html, the first click on the grid scrolls the page so that the grid is on the center and the event is swallowed. You have to click again to have the cellclick event registered. This only happens in IE (I am using version 8). The good news is that this does not happen with other browsers, could this be a bug and is there a way to prevent this first scrolling action from happening?

    Thanks

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default [4.0.1] Complex dashboard example is forcing scroll on the page, where it should not.

    [4.0.1] Complex dashboard example is forcing scroll on the page, where it should not.


    Demo: http://moduscreate.com/v/2011-05-20_1521.mp4

  3. #3
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    @benal, i was having similar issues. I've merged your thread with my bugs thread. I hope the sencha team notices it.

  4. #4
    Sencha User
    Join Date
    May 2011
    Posts
    4
    Vote Rating
    0
    jrb is on a distinguished road

      0  

    Default


    I have the same issue with IE (tried versions 7-9).

    I'm using a renderer to create a link in a cell. In most browsers (Firefox, Opera, Safari) everything works normally. In IE I see the same page repositioning and am forced to click the link a second time to actually activate it.
    Last edited by jrb; 1 Jun 2011 at 9:31 AM. Reason: removed Chrome from the unaffected browser list

  5. #5
    Sencha User
    Join Date
    Jun 2010
    Posts
    66
    Vote Rating
    0
    dontbugme is on a distinguished road

      0  

    Default


    Same problem here. Reproducible in Firefox 3 and Chrome 11

  6. #6
    Sencha User
    Join Date
    Dec 2009
    Posts
    1
    Vote Rating
    0
    wimex is on a distinguished road

      0  

    Default


    Same here. Anyone has a workaround? I have no idea how to debug this...

  7. #7
    Sencha User
    Join Date
    May 2011
    Posts
    4
    Vote Rating
    0
    jrb is on a distinguished road

      0  

    Default


    Quote Originally Posted by dontbugme View Post
    Same problem here. Reproducible in Firefox 3 and Chrome 11
    Just tried with Chrome again, and I'm seeing the same thing.

  8. #8
    Sencha User
    Join Date
    Dec 2008
    Posts
    14
    Vote Rating
    0
    Brusin is on a distinguished road

      0  

    Default


    Same problems with TreeView in IE 8. When clicking on a node, first page scrolls to Tree's Panel, after second click redirect to href value of the Tree.

    Tried workaround

    Code:
    listeners: {
                "selectionchange": {
                    fn: selectionchange,
                    scope: this
                }
            }
    
        function selectionchange(th, selections, o) {
            window.location = selections[0].data.href;
        }

  9. #9
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    20
    Vote Rating
    0
    snoorani is on a distinguished road

      0  

    Default [4.0.2a] In IE, grid column with a renderer with a link not firing on first click

    [4.0.2a] In IE, grid column with a renderer with a link not firing on first click


    I've got a grid with a column using a renderer to transform the content into a link. In IE (I've tested with IE8), clicking on the link on page load (that is, without scrolling at all and clicking the link the first time) the page scrolls in order to bring the grid into focus instead of resulting in the link being clicked.

    The following code demonstrates what I'm talking about:

    Code:
    <html>
    <head>
        <script type="text/javascript" src="/ext/v4/ext-all.js"></script>
        <link href="/ext/v4/resources/css/ext-all.css" media="screen" rel="stylesheet" type="text/css" >
        
        <script type="text/javascript">
        Ext.onReady(function() {
            Ext.create('Ext.data.Store', {
                storeId:'simpsonsStore',
                fields:['name', 'email', 'phone'],
                data:{'items':[
                    {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
                    {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
                    {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},                        
                    {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"},
                    {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
                    {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
                    {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},                        
                    {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"},
                    {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
                    {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
                    {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},                        
                    {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"},
                    {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
                    {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
                    {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},                        
                    {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"},
                    {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
                    {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
                    {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},                        
                    {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"},
                    {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
                    {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
                    {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},                        
                    {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"},
                    {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
                    {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
                    {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},                        
                    {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"},
                    {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
                    {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},                        
                    {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"},
                    {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
                    {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
                    {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},                        
                    {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"},
                    {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
                    {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},                        
                    {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"},
                    {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
                    {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
                    {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},                        
                    {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
                ]},
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        root: 'items'
                    }
                }
            });
    
            Ext.create('Ext.grid.Panel', {
                store: Ext.data.StoreManager.lookup('simpsonsStore'),
                columns: [
                    {header: 'Name',  dataIndex: 'name', renderer: function(value) {
                        return Ext.String.format('<a href="http://www.google.com">{0}</a>', value);
                    }},
                    {header: 'Email', dataIndex: 'email'},
                    {header: 'Phone', dataIndex: 'phone'}
                ],
                forceFit: true,
                renderTo: 'extGrid'
            });
        });
        </script>
    </head>
    <body>
        <div style="background-color: aqua; height: 200px"></div>
        <div id="extGrid"></div>
    </body>
    </html>

  10. #10
    Sencha User
    Join Date
    May 2011
    Posts
    4
    Vote Rating
    0
    jrb is on a distinguished road

      0  

    Default


    I was playing around with this again a while ago and it seemed the selection model was getting in the way. I tried setting a new selModel in the grid like so:
    Code:
    selModel: Ext.create('Ext.selection.Model', { listeners: {} }),
    It worked for me, but may cause trouble for anyone relying on the selection model to do something.