Ext中的表格功能非常强大，包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。表格由类Ext.grid.GridPanel定义，继承自Ext.Panel，其xtype为grid。在EXT中，表格控件必须包含列定义信息，并指定表格的数据存储器。表格数据最起码有列、数据、转换原始数据这3项。列信息由数组columns定义，表格的数据存储器由Ext.data.Store来定义。store负责把各种各样（如二维数组、JSON对象数组、XML文本等）的原始数据转换成Ext.data.Record类型的对象。通过Ext.data.ArrayStore我们可以把任何格式的数据转化成表格可以使用的形式，这样就不需要为每种数据格式写一个对应的实现了。
制作一个简单的表格及属性说明
|
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
|
<script type=
"text/javascript"
>
//表格数据最起码有列、数据、转换原始数据这3项
Ext.onReady(
function
(){
//定义列
var
columns = [
{header:
'编号'
,dataIndex:
'id'
},
//sortable:true 可设置是否为该列进行排序
{header:
'名称'
,dataIndex:
'name'
},
{header:
'描述'
,dataIndex:
'descn'
}
];
//定义数据
var
data =[
[
'1'
,
'张三'
,
'描述01'
],
[
'2'
,
'李四'
,
'描述02'
],
[
'3'
,
'王五'
,
'描述03'
],
[
'4'
,
'束洋洋'
,
'思考者日记网'
],
[
'5'
,
'高飞'
,
'描述05'
]
];
//转换原始数据为EXT可以显示的数据
var
store =
new
Ext.data.ArrayStore({
data:data,
fields:[
{name:
'id'
},
//mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置
{name:
'name'
},
{name:
'descn'
}
]
});
//加载数据
store.load();
//创建表格
var
grid =
new
Ext.grid.GridPanel({
renderTo:
'grid'
,
//渲染位置
store:store,
//转换后的数据
columns:columns,
//显示列
stripeRows:
true
,
//斑马线效果
//enableColumnMove: false, //禁止拖放列
//enableColumnResize: false, //禁止改变列宽度
loadMask:
true
,
//显示遮罩和提示功能,即加载Loading……
forceFit:
true
//自动填满表格
});
});
</script>
|
另外，有什么想说的，欢迎大家在下面留言，大家一起讨论进步！
本文转自shyy8712872 51CTO博客，原文链接：http://blog.51cto.com/shuyangyang/1330020，如需转载请自行联系原作者
