1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    3
    Vote Rating
    1
    cozzamara is on a distinguished road

      0  

    Default Dynamically adjust scrolling in a memory-store based grid (FINITE scrolling)

    Dynamically adjust scrolling in a memory-store based grid (FINITE scrolling)


    I am trying to use grid (Ext.grid.Panel) to present data from a memory-based store. Honestly, what a developer has to go through in order to achieve basic scrolling in Ext grid is highly ridiculous.

    A lot of discussions go about infinite scrolling for potentially large data sets obtained from elsewhere. That's not what I need. We deal with relatively small data sets (20-100 rows) stored in memory, so we're not concerned about paging or performance at all. We always know total record count upfront and just want to load up entire set into the grid at once, without any paging or delayed loading. In other words, regular finite scrolling.

    I achieve limited success in that using buffered store with 'memory' proxy similar to this (per this complete example) and verticalScroller: 'paginggridscroller'

    Code:
        var store = Ext.create('Ext.data.Store', {
            pageSize: 50,
            buffered: true,
            purgePageCount: 0,
            model: 'Employee',
            proxy: {  type: 'memory'  }
        });
    That works fine when the store is bound to the grid initially during grid creation (by passing store: config). However, troubles begin when I try to change data in the store, or switch the store itself. Specifically, vertical scroll bar remains the same as when the grid was first created.
    For example, if I delete a bunch of rows so that scrolling is no longer necessary, scroll bar looks like before - as if the grid still has more rows than the screen fits. Same when I replace the store, or add records. There seems to be no way to tell the grid to recalculate scroll bar.

    So basically I want grid to recalculate vertical scroll bar when the number of rows in the underlying store changes, automatically or programmatically. Oh, and I am stuck with version 4.0.7, unfortunately.

    Here's what I tried so far in all combinations (none of which helped):
    • grid.reconfigure() with or without store - data changes, scroll bar does not
    • using store.removeAt() and manipulating .data property in store directly
    • Ext.ux.data.PagingMemoryProxy - makes no difference whatsoever compared to regular memory proxy
    • store.pagemap.clear() - this method is not yet in 4.0.7
    • grid.determineScrollbars() - no effect
    • grid.showVerticalScroller() - no effect
    • invalidateScrollerOnRefresh - no effect

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,346
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    In the 4.0.x branch the scrolling in the grid was a virtual scroller which didn't work the best. We revamped the scrolling in 4.1.x so my only suggestion is to bit the bullet and upgrade.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread