ExtJS4学习笔记(四)---Grid的使用

最新推荐文章于 2015-05-06 11:50:55 发布

sandykwx

最新推荐文章于 2015-05-06 11:50:55 发布

阅读量408

点赞数

分类专栏： ExtJS

ExtJS 专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何创建一个基本的ExtJS 4 Grid组件，并实现从JSON文件加载数据。涉及ExtJS Model定义、数据源配置及Grid的列设置等关键步骤。

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

Extjs4 Grid创建还是比较容易的，难记、难理解的地方，也就是数据的获取。下面，就创建一个最简单的Grid组件，后面，我们会逐渐丰富这个Grid的功能。

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grid-MHZG.NET</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../bootstrap.js"></script>
	<script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
	<script type="text/javascript" src="grid.js"></script>
</head>

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

grid.js：

Ext.require([
    'Ext.grid.*',
    'Ext.data.*'
]);
Ext.onReady(function(){
    Ext.define('MyData',{
	    extend: 'Ext.data.Model',
		fields: [
		    //第一个字段需要指定mapping，其他字段，可以省略掉。
		    {name:'UserName',mapping:'UserName'},
			 'Sex',
			 'Age',
			 'XueHao',
			 'BanJi'
		]
	});
	
	//创建数据源
	var store = Ext.create('Ext.data.Store', {
        model: 'MyData',
        proxy: {
           //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
            type: 'ajax',
            url: 'mydata.json',
            
            reader: {
                type: 'json',
                root: 'items',
                //totalProperty  : 'total'
            }
        },
		autoLoad: true
    });
	
	//创建Grid
	var grid = Ext.create('Ext.grid.Panel',{
	    store: store,
		columns: [
            {text: "姓名", width: 120, dataIndex: 'UserName', sortable: true},
            {text: "性别", flex: 1, dataIndex: 'Sex', sortable: false},
            {text: "年龄", width: 100, dataIndex: 'Age', sortable: true},
            {text: "学号", width: 100, dataIndex: 'XueHao', sortable: true},
            {text: "班级", width: 100, dataIndex: 'BanJi', sortable: true}
        ],
		height:400,
		width:480,
		x:20,
		y:40,
		title: 'ExtJS4 Grid示例',
        renderTo: 'demo',
        viewConfig: {
            stripeRows: true
        }
	})
})

mydata.json：当然，你也可以使用任意服务端程序返回json数据（asp?.net?java还是php，看你的爱好了）

{ 
    "items": [ 
        { 
            "UserName": "李彦宏", 
            "Sex": "男", 
            "Age":25,
			"XueHao":00001,
			"BanJi":"一班"
        }, 
		{ 
            "UserName": "马云", 
            "Sex": "男", 
            "Age":31,
			"XueHao":00002,
			"BanJi":"二班"
        },
		{ 
            "UserName": "张朝阳", 
            "Sex": "男", 
            "Age":30,
			"XueHao":00003,
			"BanJi":"一班"
        },
		{ 
            "UserName": "朱俊", 
            "Sex": "男", 
            "Age":28,
			"XueHao":00004,
			"BanJi":"一班"
        },
		{ 
            "UserName": "丁磊", 
            "Sex": "男", 
            "Age":29,
			"XueHao":00005,
			"BanJi":"二班"
        },
		{ 
            "UserName": "李国军", 
            "Sex": "男", 
            "Age":30,
			"XueHao":00006,
			"BanJi":"二班"
        },
		{ 
            "UserName": "王志宝", 
            "Sex": "男", 
            "Age":25,
			"XueHao":00007,
			"BanJi":"一班"
        }
    ] 
}

Extjs4 Grid组件的数据需要几点注意。

第一，就是数据类型，我们可以指定数据类型，比如：

var store = Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'company'},
           {name: 'price',      type: 'float'},
           {name: 'change',     type: 'float'},
           {name: 'pctChange',  type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ],
        data: myData
    });

数据类型分为以下几种：

1、auto（默认）
2、string
3、int
4、float
5、boolean
6、date

第二：Ext.data.Model，示例中，只指定了一个mapping，那么第一个mapping是必须要指定的，从第二个开始，我们就不需要再去指定mapping了，Extjs很聪明，他会根据数据来判断需要的mapping。