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。