表格是一种常见的数据表现方式，ExtJS也提供了强大的表格显示工具。现在新建一个mygrid.html文件，并添加基本的HTML代码，如下：
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8; user-scalable=no">
<title>表格</title>
<link rel="stylesheet" type="text/css"href="resources/css/ext-all.css"/>
<scripttype="text/javascript" src="bootstrap.js"></script>
<script type="text/javascript"src="mygrid.js"></script>
</head>
<body>
<divid="myDataGrid" width="100%" height=500></div>
</body>
</html>
以上红色代码是需要在基本代码里面自己添加的。然后新建一个mugrid.js文件，这个js文件的代码如下：
Ext.require([ //添加需要引用的库
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*'
]);
Ext.onReady(function(){
//1定义表格列数据模型，包括列名称、数据类型
Ext.define('myGridColumnModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'Id',type:'int',convert: null,defaultValue: undefined},
{name: 'Name'}, //姓名为字符串
{name: 'Gender'},//性别也为字符串
{name: 'StudentNO',type: 'int', convert: null,defaultValue: undefined},//学号为int
{name: 'Height',type: 'float', convert: null, defaultValue: undefined},//高度为float
{name: 'Birthday', type: 'date',dateFormat: 'Yn/j h:ia',defaultValue: undefined}//生日为date
],
idProperty: 'Id'//ID属性
});
// 表格中显示的数据数组，与myGridColumnModel模型定义的列对应
var myData = [
[1, '张三', '男', 2012001, 170, '1985 9/1 12:00am'],
[2, '王五', '男', 2012002, 168, '1983 5/21 12:00am'],
[3, '王芳', '女', 2012003, 160, '1985 10/10 12:00am'],
[4, '李四', '男', 2012004, 172, '1984 7/13 12:00am'],
[5, '赵静', '女', 2012005, 155, '1985 5/1 12:00am'],
[6, '孙六', '男', 2012006, 165, '1985 3/21 12:00am'],
[7, '钱七', '男', 2012007, 170, '1984 12/12 12:00am']
];
//2 创建表格存储数据
var store = Ext.create('Ext.data.ArrayStore', {
model: 'myGridColumnModel', //表格模型
data: myData //数据
});
/**
*自定义显示该数据，在此用于表示如果性别是女性就显示红色
*@param{Object}val
*/
function showFemale(val) {
if (val == "女") {
return'<span style="color:red;">' + val + '</span>';
} elseif (val == "男"){
return'<span style="color:blue;">' + val + '</span>';
}
return val;
}
//3 创建表格
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
collapsible: true,
multiSelect: true,
stateId: 'stateGrid',
columns: [
{
text : '编号', //表格列头显示的文字
width : 40,
sortable : true, //是否可以排序
dataIndex: 'Id' //来源于store中的哪一列，注意大小写
},
{
text : '姓名',
width : 60,
sortable : true,
dataIndex: 'Name'
},
{
text : '学号',
width : 60,
sortable : true,
dataIndex: 'StudentNO'
},
{
text : '性别',
width : 40,
sortable : true,
renderer : showFemale,
dataIndex: 'Gender'
},
{
text : '身高',
width : 40,
sortable : true,
dataIndex: 'Height'
},
{
text : '出生时间',
flex : 1,//弹性显示，如果宽度比较大时，该列宽度就为多余宽度
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'), //以月/日/年的形式显示时间
dataIndex: 'Birthday'
}
],
height: 300,
width: 400,
title: '表格',
renderTo: 'myDataGrid', //绘制到html中定义的div中
viewConfig: {
stripeRows: true,
enableTextSelection: true
}
});
});
这段代码比较长，总的来说分为三个部分：一、定义表格列数据模型myGridColumnModel，以前也叫ColumnModel，它主要是继承自Ext.data.Model，用于表示表格列的结构，包括列的名称、数据类型、格式等，在定义列数据模型之后再添加数据，本例中是myData变量，这个数组里面的结构应与myGridColumnModel中定义的列结构以及数据类型一致；二、创建表格存储数据store，意思就是根据前面定义的列数据模型myGridColumnModel以及定义的表格源数据myDate来创建一个用于表格grid显示的数据，类似于数据转换；三、创建表格grid（来源于Ext.grid.Panel），并设置其store为前面创建的表格存储数据，同时，在columns中定义显示的列数组，如：
{
text : '编号', //表格列头显示的文字
width : 40,
sortable : true, //是否可以排序
dataIndex: 'Id' //来源于store中的哪一列，注意大小写
}
text表示列标题，width表示列宽度，sortable表示是否可以排序（升序和降序），dataIndex这个属性表示该列来源于myGridColumnModel的哪一列，它的值应与myGridColumnModel中定义的字段名称一致，如myGridColumnModel中添加了name为Id的字段（field），那么在此也必须为Id，特别要注意大小写，否则可能无法正常显示该列数据。除了介绍的这些常用属性外，还有renderer属性用于表示该列的显示方式，例如显示时间就设置其为Ext.util.Format.dateRenderer('m/d/Y')。如果需要特殊处理，则可以通过定义函数来区别显示，举例说明，如果性别这一列要求男性显示为绿色，女性显示为红色，则可以自定义一个函数showFemale，如下：
/**
*自定义显示该数据，在此用于表示如果性别是女性就显示红色
*@param{Object}val
*/
function showFemale(val) {
if (val == "女") {
return'<span style="color:red;">' + val + '</span>';
} else {
return'<span style="color:blue;">' + val + '</span>';
}
return val;
}
如果这个值为“女”，就返回颜色为red，如果为“男”就返回颜色为blue。
flex属性用于指示该列是否为有弹性的列，主要是当表格宽度比较宽时，该列宽度就为表格多余的宽度，不至于出现还有多余空列。
保存mygrid.html和mygrid.js文件之后，浏览mygrid.html网页，其结果如下图所示：
注意到前面的代码中有两处出现了关于时间格式的设置，第一处为myGridColumnModel定义Birthday时，其dateFormat为'Y n/j h:ia'，那么对应在定义数据myData的时候其时间输入格式也应该遵循该格式要求，如1985 9/1 12:00am。在此，Y表示以四位数字显示年份，如果是y则以2位数表示年份，n表示当月的月份（不补0），如果是m则也表示月份（但是要补0，如3月份应表示为03），j表示月份中天数（不补0），如果是d则也表示月份中的天数（但是要补0，即8号应表示为08），a表示用小写的am或pm表示上午还是下午，h表示用12小时制表示小时（不足位补0，如8点表示为08），i表示分钟数（不足位补0，如8分钟表示为08）。同样，在另外一处即表示中显示出生时间的格式Ext.util.Format.dateRenderer('m/d/Y')，它是以“月/日/年”的形式来显示。关于时间格式中各字符的含义如下表所示：
|
符号 |
含义 |
举例 |
|
d |
月份中的天数，两位数字，不足位补“0” |
10 |
|
D |
当前星期的缩写，三个字母 |
Wed |
|
j |
月份中的天数，不补“0” |
10 |
|
l |
当前星期的完整拼写 |
Wednesday |
|
S |
英语中月份天数的序数词的后缀，2个字符（与格式符“j”连用） |
th |
|
w |
一周之中的天数（0～6）（周日为0, |
3 |
|
z |
一年之中的天数（0～365） |
9 |
|
W |
一年之中的周数，两位数字（00～53） |
1 |
|
F |
当前月份的拼写 |
January |
|
m |
当前的月份，两位数字，不足位补“0” |
1 |
|
M |
当前月份的完整拼写，三个字母 |
Jan |
|
n |
当前的月份，不补“0” |
1 |
|
t |
当前月份的总天数 |
31 |
|
L |
是否闰年（“1”为闰年，“0”为平年） |
0 |
|
Y |
4位数字表示的当前年数 |
2007 |
|
y |
2位数字表示的当前年数 |
7 |
|
a |
小写的“am”和“pm” |
pm |
|
A |
大写的“AM”和“PM” |
PM |
|
g |
12小时制表示的当前小时数，不补“0” |
3 |
|
G |
24小时制表示的当前小时数，不补“0” |
15 |
|
h |
12小时制表示的当前小时数，不足位补“0” |
3 |
|
H |
24小时制表示的当前小时数，不足位补“0” |
15 |
|
i |
不足位补“0”的分钟数 |
5 |
|
s |
不足位补“0”的秒数 |
1 |
|
u |
秒数的小数形式 |
0.1 |
|
O |
用小时数表示与GTM的差异数 |
-600 |
|
T |
当前系统设定的时区 |
CST |
|
Z |
用秒数表示的时区偏移量（西方为负数，东方为正数） |
-21600 |
|
d |
月份中的天数，两位数字，不足位补“0” |
10 |
|
D |
当前星期的缩写，三个字母 |
Wed |
|
j |
月份中的天数，不补“0” |
10 |
|
l |
当前星期的完整拼写 |
Wednesday |
|
S |
英语中月份天数的序数词的后缀，2个字符（与格式符“j”连用） |
th |
|
w |
一周之中的天数（0～6）（周日为0, |
3 |
|
z |
一年之中的天数（0～365） |
9 |
|
W |
一年之中的周数，两位数字（00～53） |
1 |
|
F |
当前月份的拼写 |
January |
|
m |
当前的月份，两位数字，不足位补“0” |
1 |
|
M |
当前月份的完整拼写，三个字母 |
Jan |
|
n |
当前的月份，不补“0” |
1 |
|
t |
当前月份的总天数 |
31 |
|
L |
是否闰年（“1”为闰年，“0”为平年） |
0 |
|
Y |
4位数字表示的当前年数 |
2007 |
|
y |
2位数字表示的当前年数 |
7 |
|
a |
小写的“am”和“pm” |
pm |
|
A |
大写的“AM”和“PM” |
PM |
|
g |
12小时制表示的当前小时数，不补“0” |
3 |
|
G |
24小时制表示的当前小时数，不补“0” |
15 |
|
h |
12小时制表示的当前小时数，不足位补“0” |
3 |
|
H |
24小时制表示的当前小时数，不足位补“0” |
15 |
|
i |
不足位补“0”的分钟数 |
5 |
|
s |
不足位补“0”的秒数 |
1 |
|
u |
秒数的小数形式 |
0.1 |
|
O |
用小时数表示与GTM的差异数 |
-600 |
|
T |
当前系统设定的时区 |
CST |
|
Z |
用秒数表示的时区偏移量（西方为负数，东方为正数） |
-21600 |
格式中间的连接符号可以自己任意组合选择，如使用斜杠/或者短线-，甚至汉字，如格式“Y年n月j日 G:i:s”，其显示结果类似“2011年3月1日 8:00:30”。
扫一扫
7549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
