使用ExtJS创建动态数据表格-优快云博客

表格是一种常见的数据表现方式，ExtJS也提供了强大的表格显示工具。现在新建一个mygrid.html文件，并添加基本的HTML代码，如下：

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01//EN">

<html>

<head>

<scripttype="text/javascript" src="bootstrap.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