Building an Infinite Data Grid with Ext JS—Webinar Q&A Recap

Thanks everyone for attending my recent webinar on December 17, 2020 – Building an Infinite Data Grid with Ext JS.

In this blog post, I am answering the questions that we got during the webinar.

1 – Can we set the number of total records to runtime? We have a table where there are many records inserted every 2 minutes.

Yes, since you dynamically send the total count of records as you make a server call for a page of data, those calls can return a ‘real time’ total. You can use the dynamically sent total to resize the grid scrollbar after each retrieval of data from the server

2 – What is the developer “editor” you are using?

I use the Visual Studio Code editor from Microsoft – you can download it from the web here: https://code.visualstudio.com/

3 – What version is the earliest version that supported BuffererStore/BufferedRenderer?

The BufferedRenderer has been available since Ext JS version 5.0.0 – see this page for details: https://docs.sencha.com/extjs/7.3.1/classic/Ext.grid.Panel.html#cfg-bufferedRenderer

4 – What is the difference of this BuffererStore/BufferedRenderer approach (obviously, user experience is a bit different) compared to ‘old fashioned way’ of having a toolbar over a grid and using pagination?

The ‘old fashioned way’ of using a paging toolbar is still a good way to display a large grid with a lot of data, but there will be a differing user experience as a user moves from page to page. With a paging toolbar and a lot of pages, it is difficult to get to a specific section of the data, ie, the middle of the data. With an ‘infinite grid’ approach to displaying the data, the scrollbar fully displays the context of what page you are on, and moving to a certain page (like the middle of the grid’s data) is more intuitive

5 – Is it possible to make infinite grid with scrolling to top and adding new data on top of grid?

Yes, you can data to the grid and then react to the data in a buffered grid. If you are adding data to the top if the grid, and the grid dynamically changes, you would need to make a decision as to weather you programmatically move the scrollbar vs leaving it Lehrer it would be after the new data.

6 – In the modern toolkit, what is the correct way to reload a virtual store driving an infinite grid?

I use reload() on the store but this always loads the first page twice and the first request seems to stall the loading.

In the modern toolkit, the virtual store has the equivalent functionality as the Buffered store for the classic toolkit – further information on the virtual store can be found here: https://docs.sencha.com/extjs/7.3.1/modern/Ext.data.virtual.Store.html

Thanks again for attending, and if you have any questions beyond these, please feel free to send me an email and I can respond to you. I look forward to you joining me on future webinars! Interested in building your own Data Grid using Javascript Grid with Ext Js? Start your journey right away!