一個簡單的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示例</title>
<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
<script type="text/javascript" src="ext4/ext-all.js"></script>
<script type="text/javascript" src="js/grid.js"></script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
grid.js代碼
//預加載
Ext.require(
[
'Ext.grid.*',
'Ext.data.*'
]
);
Ext.onReady(
function(){
//創建Model
Ext.define(
'MyData',
{
extend:'Ext.data.Model',
fields:[
{name:'name',mapping:'name'},
{name:'sex',mapping:'sex'},
{name:'age',mapping:'age'}
]
}
)
//創建數據源
var store = Ext.create(
'Ext.data.Store',
{
model:'MyData',
proxy:{
type:'ajax',
url:'data/mydata.json',
reader:{
type:'json',
root:'items'
}
},
autoLoad:true
}
);
//創建grid
var grid = Ext.create('Ext.grid.Panel',{
store:store,
columns:[
{text:'姓名',width:120,dataIndex:'name',sortable:true},
{text:'性別',width:120,dataIndex:'sex',sortable:true},
{text:'年齡',width:120,dataIndex:'age',sortable:true}
],
height:400,
width:480,
x:20,
y:40,
title: 'ExtJS4 Grid示例',
renderTo: 'grid',
viewConfig: {
stripeRows: true
}
}
)
}
)
mydata.json代碼：
{
"items": [
{
"name": "小黑",
"sex": "男",
"age":25,
},
{
"name": "哈哈",
"sex": "男",
"age":31,
},
{
"name": "好好",
"sex": "男",
"age":30,
}
]
}
效果圖：
多表頭grid
只需要修改grid的創建代碼即可：
var grid = Ext.create('Ext.grid.Panel',{
store:store,
columns:[
{
text:'基本信息',
columns:[
{text:'姓名',width:120,dataIndex:'name',sortable:true},
{text:'性別',width:120,dataIndex:'sex',sortable:true},
{text:'年齡',width:120,dataIndex:'age',sortable:true}
]
},{
text:'日期',
}
],
height:400,
width:480,
x:20,
y:40,
title: 'ExtJS4 Grid示例',
renderTo: 'grid',
viewConfig: {
stripeRows: true
}
}
)
效果圖：
Extjs---grid的使用