我曾经在第6节里讲到表格分页，还记得之前的分页组件是什么样的吗？
上面只有文字显示，我们来为其制作的更美观点，好吧，不卖关子了，讲本节的内容：进度条分页控件，这是表格扩展组件。
首先我们需要引入扩展组件才可以使用：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//引入扩展组件
Ext.Loader.setConfig({enabled:
true
});
Ext.Loader.setPath(
'Ext.ux'
,
'../ExtJS4.2/ux/'
);
Ext.require([
'Ext.data.*'
,
'Ext.grid.*'
,
'Ext.util.*'
,
'Ext.tip.QuickTipManager'
,
'Ext.ux.data.PagingMemoryProxy'
,
'Ext.ux.ProgressBarPager'
]);
|
在表格的bbar中引入组件类：
|
1
2
3
4
5
6
|
bbar: Ext.create(
'Ext.PagingToolbar'
, {
pageSize: 10,
store: store,
displayInfo:
true
,
plugins:
new
Ext.ux.ProgressBarPager()
})
|
OK，来看下效果怎么样
嗯，看起来不错、
但是上面的数据如果一页显示的条数过多的话，很可能导致性能问题，有些人说是extjs做的不好，好吧，下面给种方法让你知道你自己错了：
我们只要为store设置一个参数就可以了。
|
1
|
buffered:
true
//缓冲式表格视图
|
这原理其实就和3D游戏里的一种实现渲染的概念差不多，即表格里显示哪些数据，就把哪些数据显示出来，这样就不用去处理不是的那些DOM，从而提高了整体的效率。
分组表头
借助分组表头（Grouping GridView）这个组件，我们可以实现内容更加复杂的表格组件，有时候我们做报表可能会经常碰到，如下图所示，
上面的效果是怎么实现的呢？网上说是用扩展组件，我自己试了下，发现ExtJS4.2里已经没有这种方法了，我自己琢磨出来下面的方法，你们可以试试：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
//定义列
var
columns = [
{
text:
'第一组'
,
locked:
true
,
columns:[
{header:
'编号'
,dataIndex:
'id'
,width:50},
{header:
'名称'
,dataIndex:
'name'
,width:80},
{header:
'描述'
,dataIndex:
'descn'
,width:112},
{header:
'状态'
,dataIndex:
'status'
,width:80,renderer:
function
(value){
if
(value==
'可用'
){
return
"<span style='color:green;font-weight:bold';>可用</span><img src='images/right.gif' />"
;
}
else
{
return
"<span style='color:red;font-weight:bold';>禁用</span><img src='images/wrong.gif' />"
;
}
}}]
},
{text:
'第2组'
,
columns:[
{header:
'编号'
,dataIndex:
'id'
,width:50},
{header:
'名称'
,dataIndex:
'name'
,width:80},
{header:
'描述'
,dataIndex:
'descn'
,width:112},
{header:
'状态'
,dataIndex:
'status'
,width:80,renderer:
function
(value){
if
(value==
'可用'
){
return
"<span style='color:green;font-weight:bold';>可用</span><img src='images/right.gif' />"
;
}
else
{
return
"<span style='color:red;font-weight:bold';>禁用</span><img src='images/wrong.gif' />"
;
}
}}]
}
];
|
上面的方法主要是列里嵌套列，这样就可以实现分组表头的效果。如果想冻结列，那么可以在需要的分组表头里加上locked: true
效果如下：
锁定了第一组后，任凭你其他组怎么动，第一组就是不会变动。
下面贴上本节所学的所有代码，方便大家学习调式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
<
title
>Hello Extjs4.2</
title
>
<
link
href
=
"../ExtJS4.2/resources/css/ext-all.css"
rel
=
"stylesheet"
>
<
script
src
=
"../ExtJS4.2/ext-all.js"
></
script
>
<
script
src
=
"../ExtJS4.2/locale/ext-lang-zh_CN.js"
></
script
>
<
script
type
=
"text/javascript"
>
//引入扩展组件
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ExtJS4.2/ux/');
Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.util.*',
'Ext.tip.QuickTipManager',
'Ext.ux.data.PagingMemoryProxy',
'Ext.ux.ProgressBarPager'
]);
//表格数据最起码有列、数据、转换原始数据这3项
Ext.onReady(function(){
//定义列
var columns = [
{
text:'第一组',
locked: true,
columns:[
{header:'编号',dataIndex:'id',width:50},
{header:'名称',dataIndex:'name',width:80},
{header:'描述',dataIndex:'descn',width:112},
{header:'状态',dataIndex:'status',width:80,renderer:function(value){
if(value=='可用'){
return "<
span
style
=
'color:green;font-weight:bold'
;>可用</
span
><
img
src
=
'images/right.gif'
/>";
} else {
return "<
span
style
=
'color:red;font-weight:bold'
;>禁用</
span
><
img
src
=
'images/wrong.gif'
/>";
}
}}]
},
{text:'第2组',
columns:[
{header:'编号',dataIndex:'id',width:50},
{header:'名称',dataIndex:'name',width:80},
{header:'描述',dataIndex:'descn',width:112},
{header:'状态',dataIndex:'status',width:80,renderer:function(value){
if(value=='可用'){
return "<
span
style
=
'color:green;font-weight:bold'
;>可用</
span
><
img
src
=
'images/right.gif'
/>";
} else {
return "<
span
style
=
'color:red;font-weight:bold'
;>禁用</
span
><
img
src
=
'images/wrong.gif'
/>";
}
}}]
}
];
//定义数据
var data =[
['1','小王','描述01','可用'],
['2','李四','描述02','禁用'],
['3','张三','描述03','可用'],
['4','束洋洋','思考者日记网','可用'],
['5','高飞','描述05','禁用'],
['6','小王','描述01','可用'],
['7','李四','描述02','禁用'],
['8','张三','描述03','可用'],
['9','束洋洋','思考者日记网','可用'],
['10','高飞','描述05','禁用'],
['11','小王','描述01','可用'],
['12','李四','描述02','禁用'],
['13','张三','描述03','可用'],
['14','束洋洋','思考者日记网','可用'],
['15','高飞','描述05','禁用'],
['16','小王','描述01','可用'],
['17','李四','描述02','禁用'],
['18','张三','描述03','可用'],
['19','束洋洋','思考者日记网','可用'],
['20','高飞','描述05','禁用'],
['21','小王','描述01','可用'],
['22','李四','描述02','禁用'],
['23','张三','描述03','可用'],
['24','束洋洋','思考者日记网','可用'],
['25','高飞','描述05','禁用']
];
//转换原始数据为EXT可以显示的数据
var store = new Ext.data.ArrayStore({
data:data,
fields:[
{name:'id'}, //mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置
{name:'name'},
{name:'descn'},
{name:'status'}
],
//buffered:true //缓冲式表格视图
});
//加载数据
store.load();
//创建表格
var grid = new Ext.grid.GridPanel({
renderTo:'grid', //渲染位置
autoHeight:true,
width:665,
height: 350,
store:store,
frame:true,
columns:columns, //显示列
stripeRows:true, //斑马线效果
//enableColumnMove: false, //禁止拖放列
//enableColumnResize: false, //禁止改变列宽度
loadMask:true, //显示遮罩和提示功能,即加载Loading……
//forceFit:true //自动填满表格
bbar: Ext.create('Ext.PagingToolbar', {
pageSize: 10,
store: store,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager()
})
});
});
</
script
>
</
head
>
<
body
>
<
h1
>我的ExtJS4.2学习之路</
h1
>
<
hr
/>
作者：束洋洋
开始日期：2013年11月25日 22:28:49
<
h2
>深入浅出ExtJS之进度条分页组件</
h2
>
<
div
id
=
"grid"
></
div
>
</
body
>
</
html
>
|
本文转自shyy8712872 51CTO博客，原文链接：http://blog.51cto.com/shuyangyang/1343688，如需转载请自行联系原作者
