普通表格范例

主要演示以下功能：
     包含复选框列、行号列
     自定义单元格的渲染
     定制表格视图
     各种选择模式：单元格、行、复选框

 

范例源码：

var datas = [[1,"张三",24,"Y",new Date(1986,06,09)], [2,"李四",30,"N",new Date(1980,09,13)], [3,"王五",28,"Y",new Date(1982,01,10)]];
  			
var person = Ext.data.Record.create([
	{name: "personId", mapping: 0},
	{name: "personName", mapping: 1},
	{name: "personAge", mapping: 2},
	{name: "personGender", mapping: 3},
	{name: "personBirth", mapping: 4}
]);

//复选框选择模式
var checkboxSM = new Ext.grid.CheckboxSelectionModel({
	checkOnly: true,
	singleSelect: false
});

var grid = new Ext.grid.GridPanel({
	id: "grid1",
	title: "GridPanel实例",
	renderTo: "div1",
	width: 500,
	height: 300,
	//frame: true,
	tbar: [
		{
			text: "取得所选单元格",
			iconCls: "search",
			handler: function(){
				/*
				//单元格选择模式：new Ext.grid.CellSelectionModel()
				var cell = grid.getSelectionModel().getSelectedCell();
				if(cell!=null) alert(cell[1]);
				*/
				
				/*
				//行选择模式：new Ext.grid.RowSelectionModel()
				var msg = "";
				grid.getSelectionModel().each(function(record){
					msg += record.get("personName") + "\n";
				});
				if(msg!="") alert(msg);
				*/
			}
		}
	],
	
	store: new Ext.data.Store({
		reader: new Ext.data.ArrayReader({id:0}, person),
		data: datas
	}),
	columns: [
		checkboxSM,
		new Ext.grid.RowNumberer({header:"<font color=red>行号</font>", width:35}),
		{id:"personId", header:"编号", width:50, dataIndex:"personId"},
		{id:"personName", header:"姓名", width:70, dataIndex:"personName"},
		{id:"personAge", header:"年龄", width:45, dataIndex:"personAge", renderer:formatAge},
		{id:"personGender", header:"性别", width:45, dataIndex:"personGender", renderer:formatGender},
		{id:"personBirth", header:"出生日期", width:120, dataIndex:"personBirth", renderer:Ext.util.Format.dateRenderer("Y年m月d日")}
	],
	//autoExpandColumn: "personBirth",
	stripeRows: true,
	//sm: new Ext.grid.CellSelectionModel()
	//sm: new Ext.grid.RowSelectionModel()
	sm: checkboxSM,
	viewConfig: { //表格视图配置对象
		enableRowBody: true,
		sortAscText: "升序",
		sortDescText: "降序",
		columnsText: "列表字段",
		getRowClass: function(record, index, rowParams, store){
			rowParams.body = "<div style='padding:2px;'>" + record.get("personName") + "</div>";
			rowParams.bodyStyle = "height:30;background-color:#FFFFCC;";
		}
	}
});

//自定义单元格渲染函数
function formatAge(value, metadata){
	if(value>=30){
		metadata.attr = 'style="background-color:#CCFFFF"';
	}
	return value;
}

function formatGender(value){
	return value=="Y" ? "男" : "<font color=red>女</font>";
}