ExtJS4学习笔记十－－Grid使用
一、grid的例：

//配置表格列
{header: "姓名", width: 50, dataIndex: 'name'},
{header: "组长", width: 50, dataIndex: 'leader', 
	xtype: 'booleancolumn',//Ext.grid.column.Boolean布尔列
	trueText: '是',
	falseText: '否'
},
{header: "生日", width: 100, dataIndex: 'birthday', 
	xtype : 'datecolumn',//Ext.grid.column.Date日期列
	format : 'Y年m月d日'//日期格式化字符串
},
{header: "薪资", width: 50, dataIndex: 'salary', 
	xtype: 'numbercolumn',//Ext.grid.column.Number数字列
	format:'0,000'//数字格式化字符串
}

xtype: 'actioncolumn',//Ext.grid.column.Action动作列
items: [{
    icon: 'images/edit.gif',//指定编辑图标资源的URL 
    handler: function(grid, rowIndex, colIndex) {
    	//获取被操作的数据记录
        var rec = grid.getStore().getAt(rowIndex);
        alert("编辑 " + rec.get('name'));
    }
},{
    icon: 'images/del.gif',//指定编辑图标资源的URL 
    handler: function(grid, rowIndex, colIndex) {
        var rec = grid.getStore().getAt(rowIndex);
        alert("删除 " + rec.get('name'));
    }                
},{
    icon: 'images/save.gif',//指定编辑图标资源的URL 
    handler: function(grid, rowIndex, colIndex) {
        var rec = grid.getStore().getAt(rowIndex);
        alert("保存 " + rec.get('name'));
    }                
}]

{
	header: "描述", width: 100,
	xtype: 'templatecolumn',//Ext.grid.column.Template数字列
	tpl : '{name}<tpl if="leader == false">不</tpl>是组长'
}

Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35})

二、自定义渲染函数示例：

//定义渲染函数，格式化性别显示
function formatSex(value){ 		
	return value=='man'?'男':'<font color=red>女</font>';
}
//定义渲染函数，格式化年龄显示
function formatAge(value,metadata){ 		
	if(value < 30){  //年龄小于30的设置背景颜色为#CCFFFF
		metadata.style = 'background-color:#CCFFFF;';
	}
	return value;
}

columns: [//配置表格列
				{header: "id", width: 30, dataIndex: 'id'},
				{header: "姓名", width: 50, dataIndex: 'name'},
				{header: "性别", width: 50, dataIndex: 'sex',renderer:formatSex},
				{header: "生日", width: 100, dataIndex: 'birthday', 
					//格式化生日显示
renderer:Ext.util.Format.dateRenderer('Y年m月d日')				},
				{header: "年龄", width: 50, dataIndex: 'age',renderer:formatAge}
			]

三、Ext.selection.CellModel（单元格选择模式）示例

//创建表格数据
var datas = [
	[100,'张三',24], [200,'李四',30], [300,'王五',29]
];
//创建Grid表格组件
var grid = Ext.create('Ext.grid.Panel',{
	title : '单元格选择模式示例',
	renderTo: Ext.getBody(),
	width:200,
	height:170,
	frame:true,
	selType: 'cellmodel',//设置为单元格选择模式Ext.selection.CellModel
	tbar : [{
		text : '取得所选单元格',
		handler : function(){
			var cell = grid.getSelectionModel().getCurrentPosition();
			alert(Ext.JSON.encode(cell));
		}
	}],
	store: {//配置数据源
        fields: ['id','name','age'],//定义字段
        proxy: {
            type: 'memory',//Ext.data.proxy.Memory内存代理
            data : datas,//读取内嵌数据
            reader : 'array'//Ext.data.reader.Array解析器
        },
        autoLoad: true//自动加载
    },
	columns: [//配置表格列
		{header: "id", width: 30, dataIndex: 'id', sortable: true},
		{header: "姓名", width: 80, dataIndex: 'name', sortable: true},
		{header: "年龄", width: 80, dataIndex: 'age', sortable: true}
	]
});

四、Ext.selection.RowModel（行选择模式）示例－－主要相关代码

simpleSelect : true,//启用简单选择功能 
multiSelect : true,//支持多选
selType: 'rowmodel',//设置为单元格选择模式Ext.selection.RowModel
tbar : [{
	text : '取得所选行',
	handler : function(){
		var msg = '';
		var rows = grid.getSelectionModel().getSelection();
		for(var i = 0; i < rows.length; i++){
			msg = msg + rows[i].get('name') + '\n';
		}
		alert(msg);
	}
}]

五、Ext.selection.CheckboxModel（复选框选择模式）示例－－关键代码

//注册复选框选择模式别名为selection.checkboxmodel
Ext.ClassManager.setAlias('Ext.selection.CheckboxModel','selection.checkboxmodel