您的位置：首页 > Web前端 > JavaScript

ExtJS5.1学习笔记——Grid组件的基本用法

2015-05-11 14:52 459 查看

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加上行号：

只需要加上如下一段代码：

执行效果如下：

可以看到每一行都加上了行号

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航