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

Extjs Grid相关组件及属性

Ext.grid.GridPanel
???? 主要配置项:
????????? store:表格的数据集
????????? columns:表格列模式的配置数组,可自动创建ColumnModel列模式
????????? autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0
????????? stripeRows:表格是否隔行换色,默认为false??
????????? cm、colModel:表格的列模式,渲染表格时必须设置该配置项
????????? sm、selModel:表格的选择模式,默认为Ext.grid.RowSelectionModel
????????? enableHdMenu:是否显示表头的上下文菜单,默认为true
????????? enableColumnHide:是否允许通过标题中的上下文菜单隐藏列,默认为true
????????? loadMask:是否在加载数据时显示遮罩效果,默认为false
????????? view:表格视图,默认为Ext.grid.GridView
????????? viewConfig:表格视图的配置对象??
????????? autoExpandMax:自动扩充列的最大宽度,默认为1000
????????? autoExpandMin:自动扩充列的最小宽度,默认为50
????????? columnLines:是否显示列分割线,默认为false
????????? disableSelection:是否禁止行选择,默认为false
????????? enableColumnMove:是否允许拖放列,默认为true
????????? enableColumnResize:是否允许改变列宽,默认为true
????????? hideHeaders:是否隐藏表头,默认为false
????????? maxHeight:最大高度
????????? minColumnWidth:最小列宽,默认为25
????????? trackMouseOver:是否高亮显示鼠标所在的行,默认为true
??
????? 主要方法:
????????? getColumnModel():取得列模式
????????? getSelectionModel():取得选择模式
????????? getStore():取得数据集
????????? getView():取得视图对象
????????? reconfigure( Ext.data.Store store, Ext.grid.ColumnModel colModel ):使用一个新的数据集和列模式重新配置表格组件?

Ext.grid.Column
????? 主要配置项:
????????? id:列id
????????? header:表头文字
????????? dataIndex:设置列与数据集中数据记录的对应关系,值为数据记录中的字段名称。如果没有设置该项则使用列索引与数据记录中字段的索引进行对应
????????? width:列宽
????????? align:列数据的对齐方式??
????????? hidden:是否隐藏列,默认为false
????????? fixed:是否固定列宽,默认为false
????????? menuDisabled:是否禁用列的上下文菜单,默认为false
????????? resizable:是否允许改变列宽,默认为true
????????? sortable:是否允许排序,默认为true
????????? renderer:设置列的自定义单元格渲染函数
??????????????? 传入函数的参数有:
??????????????????? value:数据的原始值
??????????????????? metadata:元数据对象,用于设置单元格的样式和属性,该对象包含的属性有:
????????????????????????? css:应用到单元格TD元素上的样式名称
????????????????????????? attr:一个HTML属性定义字符串,例如'style="color:blue"'
??????????????????? record:当前数据记录对象
??????????????????? rowIndex:单元格的行索引
??????????????????? colIndex:单元格的列索引
??????????????????? store:数据集对象
????????? xtype:列渲染器类型,默认为gridcolumn,其它可选值有booleancolumn、numbercolumn、datecolumn、templatecolumn等
????????? editable:是否可编辑,默认为true
????????? editor:编辑器??
????????? groupName:
????????? emptyGroupText:
????????? groupable:??

Ext.grid.ColumnModel
????? 主要配置项:
????????? columns:字段数组
????????? defaultSortable:是否进行默认排序,默认为false
????????? defaultWidth:默认宽度
??
????? 主要方法:
????????? findColumnIndex( String col ):根据给定的dataIndex查找列索引
????????? getColumnById( String id ):取得指定id对应的列
????????? getColumnCount( Boolean visibleOnly ):取得列总数
????????? getColumnHeader( Number col ):取得列的表头
????????? getColumnId( Number index ):取得列id
????????? getDataIndex( Number col ):取得列对应的数据字段名
????????? getIndexById( String id ):取得列索引
????????? getTotalWidth( Boolean includeHidden )
????????? isCellEditable( Number colIndex, Number rowIndex )
????????? isFixed()
????????? isHidden( Number colIndex )
????????? setColumnHeader( Number col, String header )
????????? setColumnWidth( Number col, Number width, Boolean suppressEvent )
????????? setDataIndex( Number col, String dataIndex )
????????? setEditable( Number col, Boolean editable )
????????? setEditor( Number col, Object editor )
????????? setHidden( Number colIndex, Boolean hidden )
????????? setRenderer( Number col, Function fn )?

?

Ext.grid.AbstractSelectionModel
????? 主要方法:
??????????? lock():锁定选择区域
??????????? unlock():解锁选择区域
??????????? isLocked():当前选择区域是否被锁定
??
Ext.grid.Cel