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 |
用设置的参数渲染网格 |