简略表格之SimpleStore _Web前端

简单表格之SimpleStore

表格一般由:ColumnModel和Store两部分组成。

<!-- Grid由Store和ColumnModel组成  -->
<!--
	store的组成：
		1、Record
		2、Proxy和Data
		3、DataReader
  -->
<HTML>
<HEAD>
	<TITLE>???EXT???HelloWorld</TITLE>
	<link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all.css"/>
	<script type="text/javascript" src="./../ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="./../ext/ext-all.js"></script>
	<script type="text/javascript" src="grid001.js"></script>
</HEAD>
<body>
</body>
</HTML>

Ext.onReady(function(){
		var cm = new Ext.grid.ColumnModel([{
									   			header: 'id',
									   			dataIndex: 'id'
											},{
												header: '姓名',
												dataIndex: 'name'
											},{
												header: 'email',
												dataIndex: 'email'
											},{
												header: '性别',
												dataIndex: 'sex'
											},{
												header: '年龄',
												dataIndex: 'age'
											}]);
		var fields = ["id","name","email","sex","age"];
		var data = [["1","chen","chen@sina.com","0","20"],
					["2","chen","chen@sina.com","0","20"],
					["3","chen","chen@sina.com","0","20"],
					["4","chen","chen@sina.com","0","20"],
					["5","chen","chen@sina.com","0","20"]];
		var store = new Ext.data.SimpleStore({
			fields: fields,
			data: data
		});
		var grid = new Ext.grid.GridPanel({
			title: 'SimpleGrid列表示例',
			width: 500,
			height: 150,
			store: store,
			cm: cm
		});
		grid.render(Ext.getBody());
});