Gird简介
表格由类Ext.gird.GirdPanel定义,继承自Panel,其xtype为Gird。在Ext中表格控件必须包含列定义信息,并指定表格数据存储器Store。
在Ext中列的定义是ColumnModel,作为整个表格的列模型。
创建一个表格:
<script type="text/javascript">
Ext.onReady(function () {
/* 创建一个包含3列的Grid */
var cm=new Ext.grid.ColumnModel([
//header:首部显示文本,dataIndex:列对应的记录值字段
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
/*
表格的列信息还包括
列是否可排序(sortable)、列的渲染函数(renderer)、宽度(width)、格式化信息(format)等
*/
//像表中添加数据
var data=[
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name5','descn5']
];
//对原始数据进行转化
var store=new Ext.data.Store({//创建数据存储对象
proxy:new Ext.data.MemoryProxy(data),
//proxy:获取数据的方式,MemoryProxy专门解析JavaScript对象
reader:new Ext.data.ArrayReader({},[
//reader:如何解析数据,ArrayReader专门解析数组
{name:'id',mapping:0},//mapping用于指定列的顺序
{name:'name',mapping:1},
{name:'descn',mapping:2}
])
});
store.load();//对数据进行初始化
var grid=new Ext.grid.GridPanel({
renderTo:'grid',//指示渲染的位置
height:200,
store:store,
cm:cm
});
});
</script>
<body>
<div id="grid"></div>
</body>