ExtJS5.1学习笔记——Grid组件的基本用法
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加上行号：
只需要加上如下一段代码：
执行效果如下：
可以看到每一行都加上了行号