Ext2.0学习－初探grid控件

代码主要参考ext 2.0的example ，这里加上自己的注释，包括某些参数的含义.
使用ext2.0创建表格很简单：
第一：准备表头，使用Ext.grid.ColumnModel
第二：准备数据，使用Ext.data.Store
第三：创建表格，使用Ext.grid.GridPanel,同时把以上的表头和数据放进去。

 

 

Ext.onReady(function() {
	/**
	 * 首先是创建表格的ColumnModel,即定义grid的各个列：
	 * Ext.grid.ColumnModel([{
	 * id:          列的唯一标识，可以用于定义css，如：(.x-grid-td-topic b { color:#333 })
	 * header:      列的名称
	 * dataIndex:   在store中本列值的索引
	 * sortable:    设置本列是否支持排序
	 * renderer:    列值的渲染函数，定义函数如：function  renderName(value, cellmeta, record, rowIndex, columnIndex, store){}
	 * width :      列宽
	 * hidden:true  是否隐藏本列
	 * }]);
	 */
	var sm = new Ext.grid.CheckboxSelectionModel();// 多选行
	var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), sm, {
		header : '编号',
		dataIndex : 'id',
		sortable : true
	}, {
		id : 'topic',
		header : '名称',
		dataIndex : 'name',
		renderer : renderName,
		width : 150
	}, {
		id : 'topic',
		header : '描述',
		renderer : renderName,
		dataIndex : 'descn'
	}]);
    /**
     * 准备数据，
     */
	var ds = new Ext.data.Store({
		proxy : new Ext.data.HttpProxy({
			url : 'gridDataJson.jsp'
		}),
		reader : new Ext.data.JsonReader({
			totalProperty : 'totalProperty',
			root : 'root',
			fields : [{
				name : 'id'
			}, {
				name : 'name'
			}, {
				name : 'descn'
			}]
		}),
		remoteSort : true
	});
    /**
     * 创建表格面板,各参数见下注释
     * 
     */
	var grid = new Ext.grid.GridPanel({
		width : 450,
		height : 275,
		//title : 'Ext表格控件',
		el : 'grid-div',       //表格依附对象id ，一般是一个DIV
		ds : ds,// store : ds, //表格数据对象：Ext.data.Store
		cm : cm,               //表头，即ColumnModel
		sm : sm,               //选择行，即CheckboxSelectionModel
		//视图配置
		viewConfig : {
			forceFit : true,
			enableRowBody : true,
			showPreview : false,//是否预览
			getRowClass : function(record, rowIndex, p, store) {
				//p: 预览内容在页面上的放置的对象，
				if (this.showPreview) {
					p.body = '<p>' + record.data.descn
							+ '[----摘要----]</p>';
					return 'x-grid3-row-expanded';
				}
				return 'x-grid3-row-collapsed';
			}
		},
		//分页工具栏显示在底部，如果要显示在顶部用tbar(top bar)
		bbar : new Ext.PagingToolbar({
			pageSize : 10,
			store : ds,
			displayInfo : true,
			displayMsg : '显示第{0}条到{1}条记录,共:{2}条',
			emptyMsg : "没有记录",
			items : ['-', {
				pressed : true,
				enableToggle : true,
				text : '预览',
				cls : 'x-btn-text-icon details',
				toggleHandler : toggleDetails
			}]
		})
	});
	grid.render();
	ds.load({
		params : {
			start : 0,
			limit : 10
		}
	});
	function toggleDetails(btn, pressed) {
		var view = grid.getView();
		view.showPreview = pressed;
		view.refresh();
	};
}

)

// 为特定行显示值 进行渲染。
function renderName(value) {
	return "<a href='xqxq' target='_blank' >" + value + "  [----]</a></b>"
}

function renderName2(value, cellmeta, record, rowIndex, columnIndex, store) {
	var str = "<input type='button' value='查看详细信息' onclick='alert(\""
			+ "这个单元格的值是：" + value + "\\n" + "这个单元格的配置是：{cellId:"
			+ cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css
			+ "}\\n" + "这个单元格对应行的record是：" + record + "，一行的数据都在里边\\n" + "这是第"
			+ rowIndex + "行\\n" + "这是第" + columnIndex + "列\\n"
			+ "这个表格对应的Ext.data.Store在这里：" + store + "，随便用吧。" + "\")'>";
	return str;
}