Ext(三)Grid Demo

废话不说。。上例子

	var storeParams = {
		params : {
			start : 0,
			limit : 25
		}
	};
	var sm = new Ext.grid.CheckboxSelectionModel();

	// Process grid start

	var processreader = new Ext.data.JsonReader({
				totalProperty : "totalSize",
				root : "data"
			}, Ext.data.Record.create([{
						name : "flowid",
						type : "string"
					}, {
						name : "flowname",
						type : "string"
					}, {
						name : "flowdes",
						type : "string"
					}, {
						name : "tablename",
						type : "string"
					}, {
						name : "creator",
						type : "string"
					}, {
						name : "createtime",
						type : "string"
					}, {
						name : "isdeploy",
						type : "string"
					}, {
						name : "editurl",
						type : "string"
					}]));

	var processproxy = new Ext.data.HttpProxy({
				url : '../../ListProcess.action'
			});

	var processstore = new Ext.data.Store({
				proxy : processproxy,
				reader : processreader
			});

	var pagingBar = new Ext.PagingToolbar({
				pageSize : 25,
				store : processstore,
				displayInfo : true,
				displayMsg : '显示记录 {0} - {1} of {2}',
				emptyMsg : "没有记录",
				items : ['-']
			});

	var processgrid = new Ext.grid.GridPanel({
		id : 'processPanel',
		store : processstore,
		sm : sm,
		width : 600,
		title : '流程列表',
		region : 'center',
		autoExpandColumn : 'flowname',
		columns : [sm, {
					header : "流程ID",
					width : 50,
					dataIndex : 'flowid',
					align : 'right'
				}, {
					id : 'flowname',
					header : "流程名称",
					width : 100,
					dataIndex : 'flowname',
					align : 'right'
				}, {
					header : "流程描述",
					width : 100,
					dataIndex : 'flowdes',
					align : 'right'
				}, {
					header : "表单名称",
					width : 100,
					dataIndex : 'tablename',
					align : 'right'
				}, {
					header : "创建者",
					width : 75,
					dataIndex : 'creator',
					align : 'right'
				}, {
					header : "更新时间",
					width : 100,
					dataIndex : 'createtime',
					align : 'right'
				}, {
					header : "是否部署",
					width : 75,
					dataIndex : 'isdeploy',
					align : 'right'
				}, {
					header : "editurl",
					hidden : true,
					dataIndex : 'editurl'
				}],
		stripeRows : true,
		bbar : pagingBar
	});

processstore.load(storeParams);

 

editurl用来存放单击时候跳转的页面

 

后台Java代码摘取如下

	// listprocess
	private int start;
	private int limit;
	public String ListProcess() throws FileNotFoundException, IOException {
		String JSonResult = processService.GetProcess(start, limit);
		getResponse().getWriter().write(JSonResult);
		return null;
	}

其中返回的JsonResult是类似如下的字符串 

{"totalSize":2,"data":[{"creator":"admin","isdeploy":"否","flowname":"..............","createtime":"2009-03-30 16:45:20.157","flowid":"9"},{"creator":"admin","isdeploy":"否","flowname":".............","createtime":"2009-03-30 16:50:01.233","flowid":"11"}]}

 

其中totalSize是返回所有记录的总数　方便Grid计算分页

 

有多种查询条件的话，在storeParams 添加自己的查询条件即可