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

ExtJS 4 Grid 组件入门

最新推荐文章于 2025-12-04 16:02:23 发布

最新推荐文章于 2025-12-04 16:02:23 发布 · 115 阅读

文章标签：

#json #xhtml #javascript #ViewUI

本文介绍如何使用 ExtJS 4 创建基本的 Grid 组件，并演示如何配置数据模型、数据源及显示属性。通过示例代码展示了 Grid 的简单应用。

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

HTML代码：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head> 

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>Grid-MHZG.NET</title> 

<linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"/>

<scripttype="text/javascript"src="../../bootstrap.js"></script>

<scripttype="text/javascript"src="../../locale/ext-lang-zh_CN.js"></script>

<scripttype="text/javascript"src="grid.js"></script>

</head> 

<body> 

<divid="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'
] 
}); 
 
//创建数据源 

varstore=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 

vargrid=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:'ExtJS4Grid示例',

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组件的数据需要几点注意。

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

varstore=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/jh:ia'}

], 
data:myData 
});