Maintain scroll position after adding a grid to different panels

[harman]

Hi All,
I am using ExtJS 4.0.7 in chrome.
I have a requirement where i have to swap the grid between two different panels.
Now when the grid is in the first panel it has a scroll. I scroll down and then add the grid to another panel, and then again bring the grid back to the first panel. But now the scroll is on the top record.
How do i maintain the scroll state?

Following is the sample code

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': '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': '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': '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': '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': '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': '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': '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': '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': 'Lisa',
            "email": "lisa@simpsons.com",
            "phone": "555-111-1224"},
        {
            'name': 'Marge',
            "email": "marge@simpsons.com",
            "phone": "555-222-1254"}
        ]
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

var myGrid = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    autoScroll:true,
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    hideMode: 'offsets',
    invalidateScrollerOnRefresh: false,
    columns: [
        {
        header: 'Name',
        dataIndex: 'name'},
    {
        header: 'Email',
        dataIndex: 'email',
        flex: 1},
    {
        header: 'Phone',
        dataIndex: 'phone'}
    ]
});


Ext.create('Ext.Button', {
    text: 'Button 1',
    renderTo: Ext.getBody(),
    handler: function() {
        panel2.add(myGrid);
    }
});

Ext.create('Ext.Button', {
    text: 'Button 2',
    renderTo: Ext.getBody(),
    handler: function() {
        panel1.add(myGrid);
    }
});

var panel1 = new Ext.panel.Panel({
    height:200,
    width:400,
    layout:'fit',
    items:[myGrid]
});

var panel2 = new Ext.panel.Panel({
    items:[],
    height:200,
    width:400,
    border:true,
    layout:'fit'
});

var myMainPanel = new Ext.panel.Panel({
    height:200,
    width:800,
    layout:'hbox',
    items:[panel1, panel2],
    renderTo: Ext.getBody()
});
​

[scottmartin]

You could using something like:

        var pos = myGrid.getView().el.dom.scrollTop;
        panel2.add(myGrid);
        myGrid.getView().el.dom.scrollTop = pos;

Scott.

[harman]

Hi Scott,

Its working for the browser provided Scroll bar in ExtJS 4.1
But i am using 4.0.7 and when the scroll is Ext.grid.Scroller the records scroll but the view of scrollbar shows it still on Top.

[scottmartin]

Any chance of upgrading to 4.1.x? There are so many problems with 4.07.

Scott.

[harman]

i will see if its possible for me to upgrade the app to 4.1.x.
Thanks for the help any way Scott.