Results 1 to 4 of 4

Thread: Usage of new ExtJS 4.2 bufferedrenderer Grid

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Vote Rating

    Default Usage of new ExtJS 4.2 bufferedrenderer Grid

    How exactly is the new bufferedrenderer grid to be used?

    Do I have to load all records into the store (buffered: false, pageSize: 50000 (or whatever)) or do I have to add buffered: true and pageSize to the store to make this thing work?!?
    Case 1 reduces the DOM elements as expected - but of course you still have the mega loading time since you are loading ALL records!
    Case 2 actually produces less DOM elements if you DO NOT add the bufferedrenderer!
    So what exactly is the purpose of this new feature?

    Thanks for your help!

  2. #2
    Sencha User evant's Avatar
    Join Date
    Apr 2007
    Sydney, Australia
    Vote Rating


    The buffered renderer only renders what it needs to be viewed (+ a few either side to keep smoothness). It can be used with or without a buffered store.

    Using it with a buffered store is good when you have a ~lot~ of records, because it will continually request what it needs from the server.

    If you have a small amount (say 2000), it's better to use a normal store with buffered rendering.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Vote Rating


    To better understand the new plugin, it's worth examining the general "buffered rendering/loading" concept, and how it differs from 4.1 to 4.2.

    • Buffered Loading - term relevant to the store i.e. we want our store to contain the 3rd page of 500 records of the 1 million that exists in the backend
    • Buffered Rendering - term relevant to the grid view i.e. our store contains 500 records, but we only want to render 50 HTML rows at a time in DOM
    • The two functionalities were "lumped" together, where you achieved both Buffered Loading and Rendering in one punch, by setting "buffered: true" on the store connected to the grid
    • As the two concepts are logically separate, you still had ability to configure how the store buffers (i.e. pageSize, leading, and trailing buffer zones), as well as how the grid renders (on the vertical scroller you could specify leading and trailing zones)
    • The "bufferedrenderer" plugin enables Buffered Rendering on the gridview, regardless of whether store is buffered or not, effectively de-coupling this functionality
    • Using only store "buffered: true" setting still behaves like it did in 4.1 - the behaviors are coupled, so both Buffered Loading (Store) & Rendering (Grid View) are utilized
    • For that matter, using "buffered: true" on a store simply causes the "bufferedrenderer" plugin to be used with the grid
    I hope this helps!

  4. #4
    Sencha User
    Join Date
    May 2012
    Vote Rating


    I subscribe to data on the javascript end and want to keep the grid updated. When I use the normal Datagrid unbuffered its pretty straight forward to insert the record since the javascript applies the current filter and sort for me. With 4.1 using the buffered grid was kind of a pain, I had to figure out what was rendered and where to insert the record. I also had to clear the page map because otherwise it would just reload the old data once I scrolled.

    I was hoping the bufferedrenderer would help me with this, but it seems that I would still need to use the buffered store. As some of our tables have 70k records. Any suggestions?

Posting Permissions

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