Ext的网格研究

 

Ext的网格在我看来就是html的表格，但是它提供了比表格更多的功能。在Ext中网格的主要代表类是：Ext.grid.Grid它代表了Ext网格的主体，但它不是全部，还其它一些相关的类，要弄清楚网格的结构，就是先清楚这些相关类的构成。下面就逐个看一看与网格相关的一些类：

1.     Ext.grid.ColumnModel

此类实际是对网格数据的一个抽象，因为网格是一个二维表，与关系型数据库一样，必须对数据的结构进行定义，Ext.grid.ColumnModel就是对数据结构的一个抽象类，但是在《Ext的数据源结构》中已经说过Record类是对记录结构一个抽象，这里怎么又有一个对数据结构的抽象呢？实际上它们的抽象是有相似之处的，实际上对于网格的定义它需要两个主要的配置对象：1就是需要一个数据源Store；2就是需要一个列模型。对一张二维表两个不同的抽象它们有相似之处，但Record的抽象侧重于内在的表示；而列模型侧重于外在的表现。对比一个它们的构造：

var TopicRecord = Ext.data.Record.create(

        {name: 'title', mapping: 'topic_title'},

        {name: 'author', mapping: 'username'},

        {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},

        {name: 'lastPost', mapping: 'post_time', type: 'date'},

        {name: 'lastPoster', mapping: 'user2'},

        {name: 'excerpt', mapping: 'post_text'}

);

以上为对一张二维表结构的抽象，下面在看一下对一个列模型的构造：

var colModel = new Ext.grid.ColumnModel([

      {header: "Ticker", width: 60, sortable: true, locked: true},

      {header: "Company Name", width: 150, sortable: true},

      {header: "Market Cap.", width: 100, sortable: true},

{header: "$ Sales", width: 100, sortable: true, renderer: money},

{header: "Employees", width: 100, sortable: true, resizable: false}

 ]);

建立列模型的配置选项有：

align : String

设置列的对齐方式

dataIndex : String

在网格中的Ext.data.Store的Ext.data.Record定义的字段名

header : String

显示在网格视图中的表头

hidden : Boolean

是否隐藏.

locked : Boolean

当在滚动视图的时候此列是否被锁定

renderer : Function

此列的渲染器

resizable : Boolean

是否允许可以改变列宽.

sortable : Boolean

是否允许此列可以排序

width : Number

此列的宽度

此类对外公开接口有：

getCellEditor( Number colIndex, Number rowIndex ) : Object

返回指定列或者单元格的编辑器(其实第二参数没有效果)

getColumnById( String id ) : Object

返回指定id的列对象

getColumnCount(Boolean visibleOnly) : Number

返回列数量(所有或仅可见)

getColumnHeader( Number col ) : String

通过指定列索引获取此列的标题

getColumnId( Number index ) : String

通过指定列索引获取此列的id值，它们有时候可能是同个值

getColumnTooltip( Number col ) : String

通过指定列索引获取此列tooltip

getColumnWidth( Number col ) : Number

通过指定列索引获取此列宽度

getColumnsBy( Function fn, [Object scope] ) : Array

通过fn(columnConfig, index)回调获取所需要的列的数组

getDataIndex( Number col ) : Number

通过指定列索引获取此列的数据索引

getIndexById( String id ) : Number

通过指定id获取对应的列索引.

getRenderer( Number col ) : Function

通过指定列索引获取此列的渲染器

getTotalWidth( Boolean includeHidden ) : Number

获取总的列宽度(所有或除去隐藏)

isCellEditable( Number colIndex, Number rowIndex ) : Boolean

返回指定的单元格是否为可编辑的

isFixed() : void

如果列宽不可改变，则返回true

isHidden( Number colIndex ) : Boolean

通过指定列索引获取此列的隐藏性

isResizable() : Boolean

如果此列可以改变宽度则返回true

isSortable( Number col ) : Boolean

通过指定列索引获取此列的可排序性

setColumnHeader( Number col, String header ) : void

通过指定列索引设置此列的列标题

setColumnTooltip( Number col, String tooltip ) : void

通过指定列索引设置此列的tooltip

setColumnWidth( Number col, Number width ) : void

通过指定列索引设置此列的列宽

setDataIndex( Number col, Number dataIndex ) : void

通过指定列索引设置此列的数据索引

setEditable( Number col, Boolean editable ) : void

通过指定列索引设置此列的可以编辑性.

setEditor( Number col, Object editor ) : void

通过指定列索引设置此列的编辑器

setHidden( Number colIndex, Boolean hidden ) : void

通过指定列索引设置此列的隐藏性.

setRenderer( Number col, Function fn ) : void

通过指定列索引设置此列的渲染器

上面的接口中有一个渲染器，它是一个方法此方法的参数及含义如下：

·         Data value. 单元格的数据

·         Cell metadata. 一个对象在其中可以设置下面的属性:

o        css 一个应用于此单元格的CSS样式字符串.

o        attr An HTML attribute definition string to apply to the data container element within the table cell.

·         The Ext.data.Record 从其中提取字段值.

·         Row index 行索引

·         Column index 列索引

·         The Ext.data.Store object 从其中提取记录

2.     Ext.grid.Grid

对网格来说其实网格类本身并不承担很在的负载，它基本上全部都是委托GridView去完成相应的功能，对于网格类本身的配置项以及公开接口如下：

autoExpandColumn : String

自动展开的列的名字

autoExpandMax : Number

自动展开的最大宽度前提是autoExpandColumn是有效的

autoExpandMin : Number

自动展开的最小宽度前提是autoExpandColumn是有效的

autoHeight : Boolean

让容器的高度自动调节为数据的实际高度

autoSizeColumns : Boolean

让列宽自由按比例分配,但是比较损耗性能.

autoSizeHeaders : Boolean

当列宽改变时,使用列数据调节标题尺寸.

enableColumnHide : Boolean

允许隐藏列.

enableColumnMove : Boolean

允许拖动列.

enableDragDrop : Boolean

允许拖动行.

enableRowHeightSync : Boolean

这是关于列锁定的,具体不太清楚.

loadMask : Object

配置或者直接使用true形成遮盖效果

maxHeight : Number

设置网格的最大高度 - 如果autoHeight选项没有被打开,将忽略此项.

maxRowsToMeasure : Boolean

不清楚

minColumnWidth : Number

最小列宽,默认值为25.

monitorWindowResize : Boolean

当窗口大小改变时自动调节网格的尺寸.

stripeRows : Boolean

使行形成斑马线的条纹.

trackMouseOver : Boolean

当鼠标移动时,高亮鼠标所经过的行.

view : Object

The Ext.grid.GridView used by the grid. This can be set before a call to render().

以上为网格的配置选项，下面看一下，它的公共接口：

Grid( String/HTMLElement/Ext.Element container, Object config )

autoSize() : void

引起网格尺寸的重新计算，通常这是自动完成的，但是如果调此方法，会人工完成这个操作

destroy( Boolean removeEl ) : void

销毁这个网格

getColumnModel() : ColumnModel

获取网格的列模型

getDataSource() : DataSource

获取网格数据源

getDragDropText() : String

返回网格的拖放文本, 默认返回this.ddText的值.

getSelectionModel() : SelectionModel

返回网格的选择模型SelectionModel.

getView() : GridView

返回网格的视图对象.

reconfigure( Ext.data.Store dataSource, Ext.grid.ColumnModel The ) : void

重新配置网格的数据源和列模型，并重新绘制网格

render() : Ext.grid.Grid

用设置的参数渲染网格