简单表格之SimpleStore

最新推荐文章于 2021-02-16 06:08:01 发布

原创最新推荐文章于 2021-02-16 06:08:01 发布 · 7.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #JavaScript #CSS #HTML #ViewUI

ExtJS 专栏收录该内容

29 篇文章

订阅专栏

本文介绍使用EXTJS创建网格组件的方法，通过定义ColumnModel和Store来展示包含ID、姓名、电子邮件、性别和年龄等字段的数据。代码示例展示了如何初始化ColumnModel、设置字段和数据，并将它们整合到GridPanel中。

表格一般由: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());
});