ExtJS 4无限制滚动条的Grid

Grid是在Web浏览器上显示大量表格数据的好方式。基本上，ExtJS 4的GridPanel就是一个增强的HTML表格，它可以轻松的获取、排序和过滤数据，而且不限数量。在版本4，我们重构了Grid，以挑战以前的假设和解锁一些激动人心的新特性和功能。今天，我们要看看如何将这些功能结合起来，从而使我们的应用的更强大和更灵活。

新的Grid中最令人兴奋的一点就是它能够处理大量数据而不无须分页处理。在以前的版本中，所有的数据都会立即被渲染，直到行数超出了浏览器的内存限制。还有一种方法是使用分页，一次只显示单个页面的数据，但这通常不是用户的最佳选择。

为了实现显示无限数据，但无须使用分页，在ExtJS 4，我们开发了一套新的虚拟滚动系统。新系统在你滚动的时候，会无缝的切换数据，一次只渲染少量的行。不像其它无限滚动的解决方案，我们可以简单的回收存在的行和替换它们的值，有点类似每一行都正在被重新渲染。这提供了两大好处，一是能够实现可变行高，二是可以随时折叠和展开每一行。

创建无限制的Grid

现在让我们开始创建我们的无限制滚动的Grid。当然，首先要做的就是准备一个数据集，因此，在这个示例中，我们将使用ExtJS论坛帖子作为我们的数据。首先，我们要建立一个模型，它表示一个论坛的主题：

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   } ) ;

大多数字段可以简单的只指定名称，系统会自动将其类型设置为自动类型。特殊的地方是lastpost，需要设置dateFormat属性，以让其可以正确处理服务器端返回的日期值。现在，已经有了一个论坛主题模型的定义，可以使用Store让它从论坛返回数据：

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           易做图SortMode :   true
24       }
25   } ) ;

在这里，使用了几个Store的配置。我们定义了的ScriptTagProxy，它将使用JSON-P加载数据，也就是会使用JSONReader去处理返回的数据，其中的extraParams属性将高速服务器返回50000条数据。我们还定义了pageSize属性让服务器，从而让服务器每次只返回200条数据。

当用户通过滚动条滚动数据时，无限制滚动Grid将使用这些配置以数据块的形式去下载200条数据，这处理将在当用户操作到接近当前数据的边界时发生，例如，当前加载了200条记录，当用户滚动到大约150个记录时，Grid会去加载下一个数据块。

现在，已经创建了模型和Store，最后的工作就是创建Grid了。这和创建其它的Grid没什么不同，唯一的区别就是需要使用paginggridscroller组件：

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

补充：web前端 , JavaScript ,