Grid of ExtJS 4 unrestricted scroll bar

Original: http://www.sencha.com/blog/infinite-grid-scrolling-in-ext-js-4/

Grid is a good way to display a large amount of tabular data in a Web browser. Basically, the Gridpanel of ExtJS 4 is an enhanced HTML table that makes it easy to get, sort, and filter data, and is unlimited in number. In version 4, we reconstructed the grid to challenge previous assumptions and unlock some of the exciting new features and features. Today, we're going to look at how these functions can be combined to make our applications more powerful and flexible.

One of the most exciting points in the new grid is its ability to handle large amounts of data without having to deal with paging. In previous releases, all data was immediately rendered until the number of rows exceeded the browser's memory limit. Another approach is to use pagination, which displays only the data for a single page at a time, but this is usually not the best choice for users.

In order to achieve the display of unlimited data, but no paging, in ExtJS 4, we developed a new virtual rolling system. The new system will seamlessly switch data as you scroll, rendering only a small number of rows at a time. Unlike other infinitely rolling solutions, we can simply reclaim existing rows and replace their values, a bit like each row is being rendered again. This provides two great benefits, one is the ability to achieve variable row heights, and the other is that you can collapse and expand each row at any time.

Create an unlimited grid

Now let's start by creating our unrestricted scrolling grid. Of course, the first thing to do is to prepare a dataset, so in this example, we will use the ExtJS forum post as our data. First, we're going to build a model that represents the theme of a forum:

1	Ext. Define (' Thread ', {
2	Extend: ' Ext. Data. Model ',
3
4	Idproperty: ' ThreadID ',
5	Fields: [
6	' ThreadID ', ' title ', ' Forumtitle ', ' ForumID ', ' author ', ' Lastposter ', ' excerpt ', ' reply Count ',
7	{name: ' Lastpost ', type: ' Date ', DateFormat: ' Timestamp '}
8	]
9	} ) ;

Most fields can simply specify a name, and the system automatically sets its type to an automatic type. The special place is lastpost, and you need to set the DateFormat property so that it can properly handle the date values returned by the server side. Now that you have a definition of a forum theme model, you can use the store to let it return data from the forum:

1	var store = Ext. Create (' Ext. Data. Store ', {
2	Model: ' Thread ',
3	PageSize:
4	AutoLoad: True ,
5
6	Remotesort: True ,
7	Sorters: {
8	Property: ' Lastpost ',
9	Direction: ' DESC '
10	} ,
11
12	Proxy: {
13	Type: ' Scripttag ',
14	URL: ' http://www.sencha.com/forum/remote_topics/index.php ',
15	Extraparams: {
16	Total: 50000
17	} ,
18	Reader: {
19	Type: ' JSON ',
20	Root: ' Topics ',
21st	Totalproperty: ' TotalCount '
22	} ,
23	Simplesortmode: True
24	}
25	} ) ;

Here, a few store configurations are used. We have defined the Scripttagproxy, which will use JSON-P to load the data, which is to use Jsonreader to process the returned data, in which the Extraparams attribute returns 50,000 data to the high speed server. We also defined the PageSize property to allow the server to return only 200 data at a time.

When the user scrolls through the scroll bar, the data is unrestricted scrolling grid uses these configurations to download 200 of data in blocks of data, which occurs when the user moves to a boundary near the current data, for example, 200 records are currently loaded, and when the user scrolls to about 150 records, Grid will load the next block of data.

Now that you've created the model and store, the last thing you do is create a grid. This is no different than creating other grid, and the only difference is the need to use the Paginggridscroller component:

1	Ext. Create (' Ext. Grid. Gridpanel ', {
2	Width: m,
3	Height:
4	Renderto:ext. GetBody (),
5	Store:store,
6
7	Verticalscroller: {
8	Xtype: ' Paginggridscroller '
9	} ,
10
11	Columns: [
12	{
13	Xtype: ' Rownumberer ',
14	Width:
15	Sortable: false
16	} ,
17	{
18	Text: "Topic",
19	Dataindex: ' title ',
20	Flex: 1
21st	} ,
22	{
23	Text: "Replies",
24	Dataindex: ' Replycount ',
25	Align: ' center ',
26	Width:
27	} ,
28	{
29	Text: "Last Post",
30	Dataindex: ' Lastpost ',
31	Width: 130 ,
32	Renderer:ext. Util. Format. Daterenderer (' n/j/Y g:i A ')
33	}
34	]
35	} ) ;

The following results are seen when the browser opens the page:

This may seem like a normal grid, but once you start scrolling, you'll find that he can keep rolling without paging. Unrestricted grid in ExtJS 4 is a great new technology. It gives the user a great experience and no longer has to worry about the page that users want to see, while unrestricted grid provides a highly scalable solution for maintaining enterprise-scale data.

Author:Ed Spencer

Ed Spencer leads the development of EXT JS and supporting projects. An expert with Ext JS and JavaScript in general and with several years experience with traditional server side frameworks, He has broad experience in API design and delivery. His passion is in crafting beautiful code that supports the world-class of product line.