<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="http://www.cnblogs.com/extjs-4.1.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="http://www.cnblogs.com/extjs-4.1.0/bootstrap.js" type="text/javascript"></script> <script type="text/javascript"> 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: { //注意这里是reader 而不是 type: 'json', root: 'items' //,//根节点 //totalProperty:'total' } }, autoLoad: true //指定数据后 将自动加载 }); var grid = Ext.create('Ext.grid.Panel', { store:store,//这里的参数不要放在引号内 columns: [ { text: '姓名', 120, dataIndex: 'UserName', sortable: true }, { text: "性别", flex: 1, dataIndex: 'Sex', sortable: false }, { text: "年龄", 100, dataIndex: 'Age', sortable: true }, { text: "学号", 100, dataIndex: 'XueHao', sortable: true }, { text: "班级", 100, dataIndex: 'BanJi', sortable: true } ], height: 400, 480, x: 20, y: 40, title: 'ExtJS4 Grid示例', renderTo: 'demo', viewConfig: { //一个配置对象，该对象将被应用到网格的UI视图 stripRows:true } }); }); </script> </head> <body> <div id="demo"></div> </body> </html>
复制json数据保存为mydata.json 记得编码格式需要是utf-8 格式的哦
我的用的是NotePad++的方式是：
mydata.json
{
"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。