1. #1
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    133
    Answers
    2
    Vote Rating
    3
    harman is on a distinguished road

      0  

    Default Unanswered: Maintain scroll position after adding a grid to different panels

    Unanswered: Maintain scroll position after adding a grid to different panels


    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
    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()
    });
    

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Answers
    656
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You could using something like:

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

  3. #3
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    133
    Answers
    2
    Vote Rating
    3
    harman is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Answers
    656
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Scott.

  5. #5
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    133
    Answers
    2
    Vote Rating
    3
    harman is on a distinguished road

      0  

    Default


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

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi