简化EXT GridPanel表格的创建方法

最近公司有个项目使用了EXT技术，在使用中由于大部分的功能模块都比较类似，所以对GridPanel进行了扩展，达到了简化使用的目的。
代码如下：

Ext.namespace("Ext.ux.grid");
Ext.ux.grid.SimpleGrid = Ext.extend(Ext.grid.GridPanel, {
		// 表格结构
		structure : '',
		// 获取数据的URL
		url : '',
		// 默认排序字段
		defaultSortField : '',
		// 关键字段
		keyField : '',
		// 是否需要额外的过滤条件，默认为空
		externalFilters : '',
		// 是否需要分页工具栏，默认为true
		needPage : true,

		frame : true,

		collapsible : true,

		animCollapse : true,

		loadMask : true,

		viewConfig : {
			forceFit : true
		},

		// private
		initComponent : function() {
			if (this.structure != '') {
				this.initStructure();
			}

			Ext.ux.grid.SimpleGrid.superclass.initComponent.call(this);

			if (!this.selModel) {
				new Ext.grid.RowSelectionModel( {
					singleSelect : true
				});
			}
		},

		// private
		initEvents : function() {
			Ext.grid.GridPanel.superclass.initEvents.call(this);

			this.getStore().load( {
				params : {
					start : 0,
					limit : 30
				}
			});

			if (this.loadMask) {
				this.loadMask = new Ext.LoadMask(this.bwrap, Ext.apply( {
					store : this.store
				}, this.loadMask));
			}
		},

		// private
		initStructure : function() {
			// 判断是否有额外过滤条件
			var oFilters = this.externalFilters == '' ? {
				filters : []
			} : {
				filters : [],
				externalFilters : this.externalFilters
			};
			var oCM = new Array();
			var oRecord = new Array();
			// 构成grid的三个组件: filters,column和record，根据structure将这三个组件创建出来
			for (var i = 0, len = this.structure.length;i < len; i++) {
				var c = this.structure[i];
				// 如果字段为hidden，则不生成filters和columnMode
				if (c.hidden == undefined || !c.hidden) {
					oFilters.filters[oFilters.filters.length] = {
						// 不输入类型则默认为string
						type : c.type == undefined ? 'string' : c.type,
						dataIndex : c.name
					};
					oCM[oCM.length] = {
						header : c.header,
						dataIndex : c.name,
						width : c.width,
						// 类型为数字则右对齐
						align : c.type == 'numeric' ? 'right' : 'left',
						// 类型为日期则生成格式为xxxx-xx-xx
						renderer : c.type == 'date'
								? Ext.util.Format.dateRenderer('Y-m-d')
								: Ext.grid.ColumnModel.defaultRenderer
					};
				}
				oRecord[oRecord.length] = {
					name : c.name,
					// 如果类型不是date型则全部为string型
					type : c.type == 'date' ? 'date' : 'string'
				};
			}
			// 生成columnModel
			this.cm = new Ext.grid.ColumnModel(oCM);
			this.colModel = this.cm;
			// 默认可排序
			this.cm.defaultSortable = true;

			var filters = new Ext.ux.grid.GridFilters(oFilters);
			// 生成表格数据容器
			var record = Ext.data.Record.create(oRecord);
			var reader = new Ext.data.JsonReader( {
				totalProperty : "totalCount",
				root : "result",
				id : this.keyField
			}, record);
			this.ds = new Ext.data.Store( {
				proxy : new Ext.data.HttpProxy( {
					url : this.url
				}),
				reader : reader,
				sortInfo : {
					field : this.defaultSortField,
					direction : 'ASC'
				},
				remoteSort : true
			});
			this.store = this.ds;
			// 生成分页工具栏
			if (this.needPage) {
				var pagingToolbar = new Ext.PagingToolbar( {
					displayInfo : true,
					displayMsg : '当前记录数: {0} - {1} 总记录数: {2}',
					emptyMsg : '没有符合条件的记录',
					store : this.ds,
					plugins : [filters, new Ext.ux.PageSizePlugin()]
				});
				pagingToolbar.pageSize = 30;
				this.bbar = pagingToolbar;
				this.bottomToolbar = this.bbar;
			}
			// 将filter加入grid
			this.plugins = filters;
		}
	});
Ext.reg('simpleGrid', Ext.ux.grid.SimpleGrid);

调用例子如下：

function getBasicUnitGrid() {
	var structure = [ {
		name : 'basicUnitNo',
		header : "No.",
		width : 50
	}, {
		name : 'basicUnitName',
		header : "基本单位名称",
		width : 130
	}];

	var grid = new Ext.ux.grid.SimpleGrid( {
		id : 'basicUnitList-grid',
		url : 'getBasicUnits.action',
		defaultSortField : 'basicUnitNo',
		keyField : 'basicUnitNo',
		structure: structure,
		el : 'listForm',
		width : 1000,
		height : 500,
		title : '基本单位列表'
	});

	return grid;
}

这样创建出的表格具有分页、简单过滤的功能。
不知道大家在自己的项目是如何对EXT的GridPanel操作的呢？还请多多指教，多多交流~

一般按自己的需求进行封装对应的GRID，以方便实际调用了。

楼主封装的很好,建议把过滤功能放在gridpanel的toolbar上，由表格结构构造一组多选checkbox和一个文本框，这样过滤操作更方便

我的gridpanel是动态的:
http://blog.csdn.net/xujiaqiang/archive/2007/07/13/1687499.aspx

通常还需要导出excel、文本文件功能

呵呵，我看过你写的文章了，受益匪浅，谢谢～

做动态生成的表格肯定是我下一步要实现的功能。

我想了解一个这个....

Ext.ux.grid.GridFilters

能给一个导出excel 文本文件功能的例子么？

生成excel是后端用jxl实现的
生成文本文件就是逗号风格的txt文件

关注这个，最好扩展出一个常用的

上面有添加、删除、查询、导出EXCEL等等