Grid of the ExtJS4 unrestricted scroll bar

Grid is a good way to display a large amount of table data on a Web browser. Basically, the GridPanel of ExtJS4 is an enhanced HTML table, which can easily obtain, sort, and filter data without limit. In version 4, we reconstructed the Grid to challenge previous assumptions and unlock some exciting new features and features. SyntaxHighlight

Grid is a good way to display a large amount of table data on a Web browser. Basically, the GridPanel of ExtJS 4 is an enhanced HTML table, which can easily obtain, sort, and filter data without limit. In version 4, we reconstructed the Grid to challenge previous assumptions and unlock some exciting new features and features. Today, we will look at how to combine these features to make our applications more powerful and flexible.

The most exciting thing about the new Grid is that it can process a large amount of data without paging. In previous versions, all data is rendered immediately until the number of rows exceeds the browser's memory limit. Another method is to display data on a single page by page at a time, but this is usually not the best choice for users.

To display infinite data without paging, we developed a new virtual rolling system in ExtJS 4. When you scroll, the new system seamlessly switches data and renders only a few rows at a time. Unlike other infinite scrolling solutions, we can simply recycle existing rows and replace their values, a bit like each row is being re-rendered. This provides two benefits: one is to achieve high variable rows, and the other is to fold and expand each row at any time.

Create unlimited Grid

Now let's start creating our unrestricted scrolling Grid. Of course, the first thing to do is prepare a dataset. Therefore, in this example, we will use the ExtJS forum post as our data. First, we need to create a model that represents the topic 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, replycount,
7 {name: lastpost, type: date, dateFormat: timestamp}
8]
9 });

For most fields, you can simply specify only the names. The system automatically sets the type to automatic. In particular, lastpost requires the dateFormat attribute so that it can correctly process the date value returned by the server. Now, you have defined a forum topic model. You can use Store to let it return data from the Forum:

1 var store = Ext. create (Ext. data. Store ,{
2 model: Thread,
3 pageSize: 200,
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,
21 totalProperty: totalCount
22 },
23 simpleSortMode: true
24}
25 });

Here, several Store configurations are used. The ScriptTagProxy we defined will load data using a JSON-P, that is, JSONReader will be used to process the returned data, where the extraParams attribute will return 50000 pieces of data to the high-speed server. We also defined the pageSize attribute for the server so that the server can return only 200 data records at a time.

When you scroll data through the scroll bar, the unrestricted Grid will use these configurations to download 200 pieces of data in the form of data blocks, this process will occur when the user operates close to the boundary of the current data. For example, 200 records are currently loaded and when the user scrolls to about 150 records, the Grid loads the next data block.

Now, you have created a model and a Store, and the final task is to create a Grid. This is no different from creating other grids. The only difference is that you need to use the paginggridscroller component:

1 Ext. create (Ext. grid. GridPanel ,{
2 width: 700,
3 height: 500,
4 renderTo: Ext. getBody (),
5 store: store,
6
7 verticalScroller :{
8 xtype: paginggridscroller
9 },
10
11 columns :[
12 {
13 xtype: rownumberer,
14 width: 40,
15 sortable: false
16 },
17 {
18 text: "Topic ",
19 dataIndex: title,
20 flex: 1
21 },
22 {
23 text: "Replies ",
24 dataIndex: replycount,
25 align: center,
26 width: 70
27 },
28 & n