Ext中的Grid组件是一个非常有用的组件,它类似于HTML中的表格,但是功能比普通的表格多得多,如下图所示:
下面记录Grid组件的基本用法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 下面是三个必须引入的文件 -->
<link rel="stylesheet" type="text/css" href="../../build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script src="../../build/ext-all.js"></script>
<script src="../../build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<style type="text/css">
*{
font-family: "微软雅黑";
}
</style>
<script type="text/javascript">
Ext.onReady(function(){
Ext.define('Person', {//Grid中的数据模型
extend: 'Ext.data.Model',
fields: ['name', 'sex', 'age', 'birthday']
});
var personData = [//Grid中要显示的数据
['张三', 'male', 20, '1999-2-3'],
['李四', 'female', 21, '1999-2-3'],
['王五', 'male', 22, '1999-2-3'],
['钱六', 'male', 23, '1999-2-3'],
['赵七', 'female', 25, '1999-2-3']
];
var personStore = new Ext.data.Store({//创建Store,在Grid中用到
model: 'Person',
proxy: {
type: 'memory',
data: personData,
reader: 'array'
},
autoLoad: true
});
var grid = Ext.create('Ext.grid.Panel', {
frame: true,
title: 'Grid',
width: 370,
height: 250,
renderTo: 'grid',
store: personStore,//显示的数据
margin: 20,
columns: [{//定义Grid的表头
header: '姓名',
width: 80,
dataIndex: 'name'//dataIndex跟数据模型中的字段建立映射关系
}, {
header: '性别',
width: 80,
dataIndex: 'sex'
}, {
header: '年龄',
width: 80,
dataIndex: 'age'
}, {
header: '出生日期',
width: 120,
dataIndex: 'birthday'
}]
});
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
上面的代码在浏览器中访问的效果如下图:
自定义渲染函数:
自定义渲染函数可以实现对列的表现形式做不同的处理,如给性别列中male显示为男,female显示为女,且用不同的颜色来显示,只需要在上面的代码中,修改表头中性别列的代码,如下所示:
header: '性别',
width: 80,
dataIndex: 'sex',
renderer: formatSex//设置渲染函数
然后定义一个渲染函数formatSex,代码如下:
function formatSex(value){
if(value == 'male'){
return '<font color="red">男</font>';
}
return '<font color="blue">女</font>';
}
渲染之后的效果如下:
设置选择模式:
grid的选择模式有如下几种:
①cellmodel,单元格选择模式
②rowmodel,行选择模式
③checkboxmodel,多选框选择模式
设置选择模式用到配置项selType,在上面的代码中加入selType: 'cellmodel',执行的效果如下:
设置selType:'rowmodel'后,再加入两个配置项:
multiSelect: true,//支持多选
simpleSelect: true,//启用简单选择功能
执行的效果如下图:
为了处理Grid选中行的数据,我们给Grid加上工具栏,如下代码:
tbar: [{
text: '取得所选行',
handler: function(){
var msg = [];
var rows = grid.getSelectionModel().getSelection();
for(var i = 0; i < rows.length; i++){
msg.push(rows[i].get('name'));
}
Ext.Msg.alert('msg', msg);
}
}],
执行结果如下:
设置selType:'checkboxmodel'后,效果如下:
给Grid加上行号:
只需要加上如下一段代码:
执行效果如下:
可以看到每一行都加上了行号