1. #1
    Ext User
    Join Date
    Apr 2008
    Posts
    8
    Vote Rating
    0
    snehaltikekar is on a distinguished road

      0  

    Default Restore scroll state on server side grid sorting

    Restore scroll state on server side grid sorting


    I have a grid which has remoteSort set as true. The grid has a large number of columns and user has to scroll the grid in order to view the right most columns. If user scrolls to the extreme right and then performs a sort, the scroll is set back to the default state, that is extreme left. I want the scroll state to be set as what user had before sorting.
    With client side sorting (remoteSort = false) this issue doesn't occur. The sort position is maintained. I want to achieve the same with remoteSort true. Could someone help me here?

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Code:
    		vew: new Ext.grid.GridView({
    			onLoad: Ext.emptyFn,
    			listeners: {
    				beforerefresh: function(v) {
    					v.scrollTop = v.scroller.dom.scrollTop;
    				},
    				refresh: function(v) {
    					v.scroller.dom.scrollTop = v.scrollTop;
    				},
    			}
    		});

  3. #3
    Ext User
    Join Date
    Apr 2008
    Posts
    8
    Vote Rating
    0
    snehaltikekar is on a distinguished road

      0  

    Default


    Thanks for the reply . I tried this one, but it didn't solve my issue. However, I could solve my issue by doing the following:

    in store's 'beforeload' event:
    state = grid.getView().getScrollState();

    in store's 'load' event:
    grid.getView().restoreScroll(state);

    I got this solution while searching on the forum at the following thread:
    http://extjs.com/forum/showthread.ph...t=scroll+state

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Dunno what you did, but it worked perfectly for me in the paging example:

    Code:
    Ext.onReady(function(){
    
        // create the Data Store
        var store = new Ext.data.Store({
            // load using script tags for cross domain, if the data in on the same domain as
            // this page, an HttpProxy would be better
            proxy: new Ext.data.ScriptTagProxy({
                url: 'http://extjs.com/forum/topics-browse-remote.php'
            }),
    
            // create reader that reads the Topic records
            reader: new Ext.data.JsonReader({
                root: 'topics',
                totalProperty: 'totalCount',
                id: 'threadid',
                fields: [
                    'title', 'forumtitle', 'forumid', 'author',
                    {name: 'replycount', type: 'int'},
                    {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
                    'lastposter', 'excerpt'
                ]
            }),
    
            // turn on remote sorting
            remoteSort: true
        });
        store.setDefaultSort('lastpost', 'desc');
    
        // pluggable renders
        function renderTopic(value, p, record){
            return String.format(
                    '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
                    value, record.data.forumtitle, record.id, record.data.forumid);
        }
        function renderLast(value, p, r){
            return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
        }
    
        // the column model has information about grid columns
        // dataIndex maps the column to the specific data field in
        // the data store
        var cm = new Ext.grid.ColumnModel([{
               id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
               header: "Topic",
               dataIndex: 'title',
               width: 420,
               renderer: renderTopic
            },{
               header: "Author",
               dataIndex: 'author',
               width: 100,
               hidden: true
            },{
               header: "Replies",
               dataIndex: 'replycount',
               width: 70,
               align: 'right'
            },{
               id: 'last',
               header: "Last Post",
               dataIndex: 'lastpost',
               width: 150,
               renderer: renderLast
            }]);
    
        // by default columns are sortable
        cm.defaultSortable = true;
    
        var grid = new Ext.grid.GridPanel({
            el:'topic-grid',
            width:700,
            height:500,
            title:'ExtJS.com - Browse Forums',
            store: store,
            cm: cm,
            trackMouseOver:false,
            sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
            loadMask: true,
            viewConfig: {
                forceFit:true,
                enableRowBody:true,
                showPreview:true,
                getRowClass : function(record, rowIndex, p, store){
                    if(this.showPreview){
                        p.body = '<p>'+record.data.excerpt+'</p>';
                        return 'x-grid3-row-expanded';
                    }
                    return 'x-grid3-row-collapsed';
                },
                onLoad: Ext.emptyFn,
                listeners: {
                    beforerefresh: function(v) {
                        v.scrollTop = v.scroller.dom.scrollTop;
                    },
                    refresh: function(v) {
                        v.scroller.dom.scrollTop = v.scrollTop;
                    },
                }
            },
            bbar: new Ext.PagingToolbar({
                pageSize: 25,
                store: store,
                displayInfo: true,
                displayMsg: 'Displaying topics {0} - {1} of {2}',
                emptyMsg: "No topics to display",
                items:[
                    '-', {
                    pressed: true,
                    enableToggle:true,
                    text: 'Show Preview',
                    cls: 'x-btn-text-icon details',
                    toggleHandler: toggleDetails
                }]
            })
        });
    
        // render it
        grid.render();
    
        // trigger the data store load
        store.load({params:{start:0, limit:25}});
    
        function toggleDetails(btn, pressed){
            var view = grid.getView();
            view.showPreview = pressed;
            view.refresh();
        }
    });

  5. #5

Thread Participants: 2