原文:http://www.sencha.com/blog/infinite-grid-scrolling-in-ext-js-4/
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 |
simpleSortMode
:
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 |
{
|
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 |
}
)
;
|
在浏览器打开页面将看到以下结果:
这看起来和普通的Grid没什么不同,不过,你一旦开始滚动,你会发现他可持续滚动下去但没有分页。无限制Grid在ExtJS 4是一个很棒的新技术。它给用户提供了一个很好的体验,再也不用担心那一页是用户想看到的,同时无限制Grid还为维护企业规模的数据提供了高扩展性的解决方案。
作者: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 Sencha product line.
分享到:
相关推荐
Bug1:出现纵向滚动条后,将横向滚动条拖到最后,然后会发现每选择一条记录整个grid就会往左移,右边空出一部份空白。 Bug2:出现横向滚动条后,向右稍拉滚动条,然后点击任意一行,会发现行内容向左偏移,滚动条...
Extjs4下拉菜单中用Grid显示,有单选,和多选两个控件,完美通用代码控件,绝对让你好用,值得收藏^-^
基于Extjs4官方的例子,做了一个关于MVC和Grid增删改的小例子
Bug1:出现纵向滚动条后,将横向滚动条拖到最后,然后会发现每选择一条记录整个grid就会往左移,右边空出一部份空白。 Bug2:出现横向滚动条后,向右稍拉滚动条,然后点击任意一行,会发现行内容向左偏移,滚动条...
实现extjs4 的树、grid、form、query等大部分组件的功能
EXTJS4 GRID 表格 分页 编辑 添加判断 颜色判断 分组 等示例
extjs4 ComboBox 点击下拉框 出现grid效果 这里只实现了点击下拉框显示gird,点击其他地方grid自动消失
Extjs4---grid的修改、删除功能---结合struts2、hibernate
自己写的一个Extjs Grid2Grid拖拽
Extjs4前台前台grid导出excel
NULL 博文链接:https://lucky16.iteye.com/blog/1522254
extjs grid示例代码extjs grid示例代码extjs grid示例代码extjs grid示例代码
Extjs4 grid 导出为Excel 下载后放在网站(不放在网站中导出按钮不能会点击无响应,因为这里调用了swf文件)里可直接运行index.html测试 <link href='...
Extjs4.0 实现列隐藏,显示和滚动条动态加载,可以直接跑的代码
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
extjs4打印grid插件,官网上的一个例子程序,有需要的人可以下载来看看。
extjs4 grid 包括form js代码
extJs4 toolbar 工具条,代码例子
Extjs动态Grid的生成 htm