extjsextjs6-classicextjs-grid

Scroll Issue when click on Extjs Grid RowExpander


I am facing a issue when using extjs grid rowexpander.
Steps to reproduce it:
1. Expand first row.
2. Now scroll to the last record of grid.
3. Now expand last row. You will see scrollbar automatically moves to top.

Thanks for help

Ext.create('Ext.grid.Panel', {
    margin: '30 2 0 0',
    layout: 'fit',
    scrollable: 'vertical',
    cls: 'logTimeInTask',
    bodyCls: 'scrollBar',
    renderTo:Ext.getBody(),
    maxHeight: 400,
    title: 'timeEntryDetail',
    scrollable: true,
    collapsible: false,
    columnLines: false,
    expandOnDblClick: false,
    viewConfig: {
        preserveScrollOnRefresh: true,
        preserveScrollOnReload: true
    },
    columns: [{
        text: 'timeLoggedBy',
        menuDisabled: true,
        sortable: false,
        flex: 1,
        renderer: function (value, p, record) {
            var retDataStr = '';
            retDataStr += Ext.String.format('<span>{0}</span>', record.data.creator);
            return retDataStr
        }
    }, {
        text: 'time',
        sortable: false,
        menuDisabled: true,
        width: 120,
        renderer: function (value, p, record) {
            var retDataStr = '';
            if (record.data.logged_hours != null) {
                retDataStr += record.data.logged_hours + 'h ';
            }
            if (record.data.logged_mins != null) {
                retDataStr += record.data.logged_mins + 'm ';
            }
            return retDataStr;
        }
    }, {
        text:'date',
        sortable: false,
        menuDisabled: true,
        width: 100,
        renderer: function (value, p, record) {
            return record.data.date;
        }
    }, {
        text: 'status',
        sortable: false,
        menuDisabled: true,
        dataIndex: 'status',
        width: 120,
        renderer: function (value, p, record) {
            return Ext.String.capitalize(record.data.status);
        }

    }],
    plugins: [{
        ptype: 'rowexpander',
        rowBodyTpl: new Ext.XTemplate(
            '<p><b>timesheet:</b> {timesheet}</p>',
            '<tpl if="description!=null">',
            '<p><b>description:</b> {[this.showDescription(values)]}</p>',
            '</tpl>', {
                showDescription: function (values) {
                    return values.description;
                }
            }
        )
    }],
    listeners: {
        render: function (grid) {
                var timeEntryDetailStore = new Ext.data.JsonStore({
                    data: [{"id":80930195009,"status":"none","description":"dfsgdfsgsd\nfg\ndsf\ng\ndsf\ng\nsdfg\nsdfg","date":"2017-07-17","created_at":"2017-07-17T09:38:32+00:00","logged_hours":3,"logged_mins":54,"timer":false,"timesheet":"111111111111","task_id":14763865922,"sort":0,"project":909679456,"project_name":"wwwwwwwwwwwwwww","creator":1270919337},{"id":80930208578,"status":"none","description":"dsfv dfd sfg\ndsf \ng\ndfsg \ndfsg\n\ndsg\nds\ng\ndfs\ngdsfg\n dfg","date":"2017-07-17","created_at":"2017-07-17T09:39:04+00:00","logged_hours":12,"logged_mins":4,"timer":false,"timesheet":"111111111111","task_id":14763865922,"sort":0,"project":909679456,"project_name":"wwwwwwwwwwwwwww","creator":1270919337},{"id":80930222146,"status":"none","description":"So the problem here is whenever we open a popup window ExtJS library is needed and it is taking up a lot of memory in IE.\n\nIs there any other way we can load a browser window popup with ExtJS grid without loading the whole ExtJS framework?\n\nOr any other idea are most welcome, as we are really facing a lot of memory issues in IE and users are not willing to use chrome.","date":"2017-07-17","created_at":"2017-07-17T09:39:38+00:00","logged_hours":4,"logged_mins":3,"timer":false,"timesheet":"111111111111","task_id":14763865922,"sort":0,"project":909679456,"project_name":"wwwwwwwwwwwwwww","creator":1270919337},{"id":80930235715,"status":"none","description":"So the problem here is whenever we open a popup window ExtJS library is needed and it is taking up a lot of memory in IE.\n\nIs there any other way we can load a browser window popup with ExtJS grid without loading the whole ExtJS framework?\n\nOr any other idea are most welcome, as we are really facing a lot of memory issues in IE and users are not willing to use chrome.","date":"2017-07-17","created_at":"2017-07-17T09:39:44+00:00","logged_hours":3,"logged_mins":54,"timer":false,"timesheet":"111111111111","task_id":14763865922,"sort":0,"project":909679456,"project_name":"wwwwwwwwwwwwwww","creator":1270919337},{"id":80930249284,"status":"none","description":"So the problem here is whenever we open a popup window ExtJS library is needed and it is taking up a lot of memory in IE.\n\nIs there any other way we can load a browser window popup with ExtJS grid without loading the whole ExtJS framework?\n\nOr any other idea are most welcome, as we are really facing a lot of memory issues in IE and users are not willing to use chrome.","date":"2017-07-17","created_at":"2017-07-17T09:39:50+00:00","logged_hours":39,"logged_mins":2,"timer":false,"timesheet":"111111111111","task_id":14763865922,"sort":0,"project":909679456,"project_name":"wwwwwwwwwwwwwww","creator":1270919337},{"id":80930262852,"status":"none","description":"So the problem here is whenever we open a popup window ExtJS library is needed and it is taking up a lot of memory in IE.\n\nIs there any other way we can load a browser window popup with ExtJS grid without loading the whole ExtJS framework?\n\nOr any other idea are most welcome, as we are really facing a lot of memory issues in IE and users are not willing to use chrome.","date":"2017-07-17","created_at":"2017-07-17T09:39:57+00:00","logged_hours":3,"logged_mins":54,"timer":false,"timesheet":"111111111111","task_id":14763865922,"sort":0,"project":909679456,"project_name":"wwwwwwwwwwwwwww","creator":1270919337}]
                });
                grid.setStore(timeEntryDetailStore);

        }
    }
})

Solution

  • I have pasted your example into a Sencha fiddle, and while this happens in 6.0.0 to 6.0.2, it seems fixed in 6.2.0 to 6.5.0.

    I have thus compared the working source code with the non-working source code and found the change. Here's a working override for you:

    Ext.define('Override.RowExpander',{
        override:'Ext.grid.plugin.RowExpander',
        toggleRow: function(rowIdx) {
            this.callParent(arguments);
            this.grid.ensureVisible(rowIdx);
        }
    });