1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    48
    Vote Rating
    2
    mbudm is on a distinguished road

      0  

    Default 4.2 RC onEditComplete grid scroll

    4.2 RC onEditComplete grid scroll


    4.2 RC (may be a 4.1 issue too, haven't checked)

    When a cell edit is complete, and the underlying grid is outside the viewable browser area, the page is scrolled so that the whole grid.view is visible.

    I attempted to track down where this is happening and I discovered in a suspect in Ext.grid.plugin.CellEditing.onEditComplete:

    Code:
    grid.getView().focus();
    So I created an override with this line commented out and sure enough it stopped the problem.

    BUT. Then I happened to test the page with just the override as per the original method - without the above line commented out. The fix still worked.

    So it seems my fix for this issue is to override a method with a direct copy of the method.

    Obviously I'm not comforatble with this as a robust solution.... so any ideas?

    Here's the test case I'm using:

    Code:
     Ext.onReady(function() {
            
    /*
     *      Uncomment this to fix the 'jump' on editComplete. This is simply a copy of Ext.grid.plugin.CellEditing.onEditComplete - so why does this work?
    
    
            Ext.override(Ext.grid.plugin.CellEditing, {
                
               
    	        onEditComplete : function(ed, value, startValue) {
    	            var me = this,
    	                grid = me.grid,
    	                activeColumn = me.getActiveColumn(),
    	                sm = grid.getSelectionModel(),
    	                context = me.context,
    	                record;
    	
    	            if (activeColumn) {
    	                record = context.record;
    	
    	                me.setActiveEditor(null);
    	                me.setActiveColumn(null);
    	                me.setActiveRecord(null);
    	        
    	                context.value = value;
    	                if (!me.validateEdit()) {
    	                    return;
    	                }
    	
    	                // Only update the record if the new value is different than the
    	                // startValue. When the view refreshes its el will gain focus
    	                if (!record.isEqual(value, startValue)) {
    	                    record.set(activeColumn.dataIndex, value);
    	                }
    	
    	                // Restore focus back to the view's element.
    	                if (sm.setCurrentPosition) {
    	                    sm.setCurrentPosition(sm.getCurrentPosition());
    	                } else {
    	                    grid.getView().focus();
    	                }
    	                me.fireEvent('edit', me, context);
    	                me.editing = false;
    	            }
    	        }
            });
            */
            
            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': 'd',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
                    { 'name': 'e',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
                    { 'name': 'f', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
                    { 'name': 'g', "email":"marge@simpsons.com", "phone":"555-222-1254"  },
                    { 'name': 'h',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
                    { 'name': 'i',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
                    { 'name': 'j', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
                    { 'name': 'k', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
                ]},
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        root: 'items'
                    }
                }
            });
            
            var editor1 = Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 2,
                pluginId:'editing' 
            })
            var editor2 = Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 2,
                pluginId:'editing' 
            })
            
            var grid1 = Ext.create('Ext.grid.Panel', {
                title: 'Simpsons',
                store: Ext.data.StoreManager.lookup('simpsonsStore'),
                columns: [
                    { text: 'Name',  dataIndex: 'name' },
                    { text: 'Email', dataIndex: 'email', flex: 1 },
                    { text: 'Phone', dataIndex: 'phone' , editor: {xtype:'textfield', selectOnFocus: true} }
                ],
                width: 400,
                plugins: [editor1]
            });
            
            var grid2 = Ext.create('Ext.grid.Panel', {
                title: 'Simpsons 2',
                store: Ext.data.StoreManager.lookup('simpsonsStore'),
                columns: [
                    { text: 'Name',  dataIndex: 'name' },
                    { text: 'Email', dataIndex: 'email', flex: 1 },
                    { text: 'Phone', dataIndex: 'phone' , editor: {xtype:'textfield', selectOnFocus: true} }
                ],
                width: 400,
                plugins: [editor2]
            });
    
    
            
            Ext.create('Ext.panel.Panel',{
                items:[grid1,grid2],
                renderTo: Ext.getBody()
            });
            
            
        })
    Here's a before screenshot showing grid 2 with a cell being edited. Notice that the grid is partially viewable in the browser window.
    editCompleteJump_examples_beforeEditComplete.pngeditCompleteJump_examples_after.png

    This second screenshot shows what happens when clicking elsewhere to complete the edit, it causes the grid2 to focus and the page scrolls up to ensure grid2 is visible. This is not the desired behaviour, we want the grid to stay where it is.

  2. #2
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,761
    Vote Rating
    108
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


    Already reported, but not fixed. Very easy to reproduce...

    http://www.sencha.com/forum/showthre...-not-in-Chrome.

  3. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    48
    Vote Rating
    2
    mbudm is on a distinguished road

      0  

    Default


    I'm still curious why the override that isn't really an override works.

Thread Participants: 1

Tags for this Thread