Ext(3) 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에 자신의 조회 조건을 추가하면 된다