简单表格之SimpleStore

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

表格一般由: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());
});
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值