日期:2014-05-16  浏览次数:20380 次

ExtJs之grid使用详解(转帖)

Ext2.0是一个javascript框架,它的Grid控件和其它可以显示 数据的控件,能够支持多种数据类型,如二 维数组、Json数据和XML数据,甚至包括我们 自定义的数据类型。Ext为我们提供了一个桥梁 Ext.data.Store,通过它我们可以把任何 格式的数据转化成 grid可以使用的形式,这样就不需要为每种数据格式写一个grid的实现了。

首先,一个表格应该有列定义,即定义表头 ColumnModel:
// 定义一个ColumnModel,表头中有四列
var cm = new Ext.grid.ColumnModel([
{header:
' 编号 ' ,dataIndex: ' id '
},
{header:
' 性 别 ' ,dataIndex: ' sex '
},
{header:
' 名 称 ' ,dataIndex: ' name '
},
{header:
' 描 述 ' ,dataIndex: ' descn '
}
]);
cm.defaultSortable
= true
;
??? 该ColumnModel定义了表格的四个列,其每列的名称和对应的数据键。请注意defaultSortable属性,即为每个列都安上一个可以排序的功 能 。如果只想某些列举有该功能,可以设置:
{header:' 编 号 ' ,dataIndex: ' id ',Sortable:true },

现在就来看看这个Ext.data.Store 是 如何转换三种数据的。

1.二维数组:
// ArrayData
var data = [
[
' 1 ' , ' male ' , ' name1 ' , ' descn1 '
]