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

Ext中的Grid组件是一个非常有用的组件，它类似于HTML中的表格，但是功能比普通的表格多得多，如下图所示：

下面记录Grid组件的基本用法：

上面的代码在浏览器中访问的效果如下图：

自定义渲染函数：

自定义渲染函数可以实现对列的表现形式做不同的处理，如给性别列中male显示为男，female显示为女，且用不同的颜色来显示，只需要在上面的代码中，修改表头中性别列的代码，如下所示：

header: '性别',
width: 80,
dataIndex: 'sex',
renderer: formatSex//设置渲染函数

然后定义一个渲染函数formatSex，代码如下：

function formatSex(value){
	if(value == 'male'){
		return '男';
	}
	return '女';
}

渲染之后的效果如下：

设置选择模式：
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加上行号：

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

执行效果如下：

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