Results 1 to 4 of 4

Thread: Periodic refresh of Grid Panel using BufferedRenderer

  1. #1
    Sencha User
    Join Date
    Oct 2014
    Posts
    10

    Default Periodic refresh of Grid Panel using BufferedRenderer

    We are looking to replace a desktop WPF application with a browser based javascript version. I have been tasked with investigating the use of ExtJs for this.

    I have deliberately started with the most difficult control we have. It is a read-only list synced to data in a remote database table. The database table works like a circular list. New items are added at the end and old items are removed. A bit like a system console log. Once 10,000 records have been reached, old records start to be removed when new ones are added.

    I have set up a Grid Panel using a BufferedRenderer, so that it'll only fetch the data in scroll view. When scrolling I need the list to be auto-refreshing.

    So every 1000ms I am calling datastore.load() in an attempt to cause a periodic refresh of the list.

    I have set loadMask to false so that the load mask does not display.

    The problem is flicker. datastore.load() seems to cause the grid panel to wipe all items in view and then reconstruct them from the new fetched data. This additionally causes the scroll position to be lost. I have noticed in the code that preserveScrollOnRefresh config option for the grid panel seems to be ignored if the grid is using a BufferedRenderer.

    I am thinking what I really want to happen is that the data fetch only replaces list items that have changed, rather than wiping the entire list and reconstructing it each time.

    I am just checking if anyone can say "hey you are doing this wrong, you shouldn't be calling datastore.load()" or "why the hell have you used X, you should be using Y?". Otherwise I assume I will need to override some methods to customize the loading.

  2. #2
    Sencha Premium User
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    2,425
    Answers
    20

    Default

    Can you use store.reload instead of load?

  3. #3
    Sencha User
    Join Date
    Oct 2014
    Posts
    10

    Default

    store.reload() seems to fetch new data but the view does not update.

    As an experiment I have manually taken data from the data store, modified a field, and "updated" each record in the view. Calling this rapidly updates with no flicker, and scroll position is preserved. Obviously this is all a hack but it at least shows the flicker isn't necessary when updating all items.

    Code:
    var range = store.getRange(0, 50);
    for (var i = 0; i < range.length; i++) {
        range[i].data.message = "" + Math.random();
        view.handleUpdate(null, range[i]);
    }
    Back to store.load(), I tracked down the cause of the flicker to the call me.clearViewEl(); in Ext.view.AbstractView.refresh(). This calls into Ext.view.Table.clearViewEl (leaveNodeContainer = false) and apparently it is destroying the node container each time, whatever that is. If I tell it not to destroy the node container Other Things Go Wrong.

  4. #4
    Sencha Premium User
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    2,425
    Answers
    20

    Default

    Quote Originally Posted by James S View Post
    store.reload() seems to fetch new data but the view does not update.
    Then it's a bug. I'd create a ticket for this issue.

    You shouldn't have to do anything special to reload a buffered grid.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •