EXTJs中的表格组件Grid

最新推荐文章于 2024-12-02 13:52:57 发布

最新推荐文章于 2024-12-02 13:52:57 发布 · 143 阅读

文章标签：

#EXT #HTML

ExtJS笔记专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用ExtJS框架创建一个简单的网格组件(grid)，包括定义数据模型、配置列头及展示数据等步骤。通过具体代码示例展示了如何将数组形式的数据绑定到网格中，并实现基本的排序功能。


Ext.onReady(function(){

	//数组
	var data = [[1,'张三',24],[2,'李四',30],[3,'王五',22]];
	//创建记录类型Person,mapping值为字段值对应数组中的索引位置
	var Person = Ext.data.Record.create([
		{name: 'personId',mapping: 0},
		{name: 'personName',mapping: 1},
		{name: 'personAge',mapping: 2}
	])
	//创建每一列的header
	var cm = new Ext.grid.ColumnModel([
			{header : 'id',width : 50 , dataIndex: 'personId' ,sortable : true},
			{header : '姓名',width : 60 ,dataIndex: 'personName' ,sortable : true},
			{header : '年龄',width : 60 ,dataIndex: 'personAge',sortable : true}
	]);

	//grid面板
	var grid = new Ext.grid.GridPanel({
		title : '简单grid示例',
		applyTo: 'grid',
		width : 250,
		height : 150,
		frame : true,
		store : new Ext.data.Store({
			reader : new Ext.data.ArrayReader({},Person),
			data : data
		}),
		cm : cm
	});
});

index.html


<html>
  <head>

    <title></title>
    <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="js/grid.js"></script>
  </head>

  <body>
  	<div id="grid"></div>
  </body>
</html>