1、Ext.grid.GridPanel主要配置项:store:表格的数据集columns:表格列模式的配置数组,可自动创建ColumnModel列模式autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0stripeRows:表格是否隔行换色,默认为falsecm、colModel:表格的列模式,渲染表格时必须设置该配置项sm、selModel:表格的选择模式,默认为Ext.grid.RowSelectionModelenableHdMenu:是否显示表头的上下文菜单,默认为trueenableColumnHide:是否允许通过标题中的上下文菜单隐藏列,默认为trueloadMask:是否在加载数据时显示遮罩效果,默认为falseview:表格视图,默认为Ext.grid.GridViewviewConfig:表格视图的配置对象autoExpandMax:自动扩充列的最大宽度,默认为1000autoExpandMin:自动扩充列的最小宽度,默认为50columnLines:是否显示列分割线,默认为falsedisableSelection:是否禁止行选择,默认为falseenableColumnMove:是否允许拖放列,默认为trueenableColumnResize:是否允许改变列宽,默认为truehideHeaders:是否隐藏表头,默认为falsemaxHeight:最大高度minColumnWidth:最小列宽,默认为25trackMouseOver:是否高亮显示鼠标所在的行,默认为true主要方法:getColumnModel():取得列模式getSelectionModel():取得选择模式getStore():取得数据集getView():取得视图对象reconfigure( Ext.data.Store store, Ext.grid.ColumnModel colModel ):使用一个新的数据集和列模式重新配置表格组件
2、Ext.grid.Column主要配置项:id:列idheader:表头文字dataIndex:设置列与数据集中数据记录的对应关系,值为数据记录中的字段名称。如果没有设置该项则使用列索引与数据记录中字段的索引进行对应width:列宽align:列数据的对齐方式hidden:是否隐藏列,默认为falsefixed:是否固定列宽,默认为falsemenuDisabled:是否禁用列的上下文菜单,默认为falseresizable:是否允许改变列宽,默认为truesortable:是否允许排序,默认为truerenderer:设置列的自定义单元格渲染函数传入函数的参数有:value:数据的原始值metadata:元数据对象,用于设置单元格的样式和属性,该对象包含的属性有:css:应用到单元格TD元素上的样式名称attr:一个HTML属性定义字符串,例如'style="color:blue"'record:当前数据记录对象rowIndex:单元格的行索引colIndex:单元格的列索引store:数据集对象xtype:列渲染器类型,默认为gridcolumn,其它可选值有booleancolumn、numbercolumn、datecolumn、 templatecolumn等editable:是否可编辑,默认为trueeditor:编辑器groupName:emptyGroupText:groupable:
3、Ext.grid.ColumnModel主要配置项:columns:字段数组defaultSortable:是否进行默认排序,默认为falsedefaultWidth:默认宽度主要方法:findColumnIndex( String col ):根据给定的dataIndex查找列索引getColumnById( String id ):取得指定id对应的列getColumnCount( Boolean visibleOnly ):取得列总数getColumnHeader( Number col ):取得列的表头getColumnId( Number index ):取得列idgetDataIndex( 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 )
4、Ext.grid.AbstractSelectionModel主要方法:lock():锁定选择区域unlock():解锁选择区域isLocked():当前选择区域是否被锁定
5、Ext.grid.CellSelectionModel主要方法:clearSelections( Boolean preventNotify ):清除选择区域getSelectedCell():取得当前选择的单元格,返回一数组,其格式:[rowIndex, colIndex]hasSelection():当前是否有选择区域select( Number rowIndex, Number colIndex, [Boolean preventViewNotify], [Boolean preventFocus], [Ext.data.Record r] ):选择指定单元格
6、Ext.grid.RowSelectionModel主要配置项:singleSelect:是否单选模式,默认为false,即可以选择多条数据主要方法:clearSelections( [Boolean fast] ):清除所有选择区域deselectRange( Number startRow, Number endRow ):取消范围内的行选择deselectRow( Number row, [Boolean preventViewNotify] ):取消指定行的选择状态each( Function fn, [Object scope] ):遍历所有选择行,并调用指定函数。当前被选行将传入该函数中getCount():得到选择的总行数getSelected():得到第一个被选记录getSelections():得到所有被选记录的数组hasNext():判断当前被选行之后是否还有记录可以选择hasPrevious():判断当前被选行之前是否还有记录可以选择hasSelection():是否已选择了数据isIdSelected( String id ):判断指定id的记录是否被选择isSelected( Number/Record index ):判断指定记录或记录索引的数据是否被选择selectAll():选择所有行selectFirstRow():选择第一行selectLastRow( [Boolean keepExisting] ):选择最后行keepExisting:是否保持已有的选择selectNext( [Boolean keepExisting] ):选择当前选择行的下一行selectPrevious( [Boolean keepExisting] ):选择当前选择行的上一行selectRange( Number startRow, Number endRow, [Boolean keepExisting] ):选择范围内的所有行selectRecords( Array records, [Boolean keepExisting] ):选择一组指定记录selectRow( Number row, [Boolean keepExisting], [Boolean preventViewNotify] ):选择一行row:行索引selectRows( Array rows, [Boolean keepExisting] ):选择多行rows:行索引数组
7、Ext.grid.CheckboxSelectionModel主要配置项:singleSelect:是否单选模式,默认为false,即可以选择多条数据checkOnly:是否只能通过点击checkbox列进行选择,默认为falsesortable:是否允许checkbox列排序,默认为falsewidth:checkbox列的宽度,默认为20
8、Ext.grid.RowNumberer主要配置项:header:行号列表头显示的内容width:列宽,默认为23
9、Ext.grid.GridView主要配置项:enableRowBody:是否包含行体sortAscText:表格标题菜单中升序的文字描述sortDescText:表格标题菜单中降序的文字描述columnsText:表格标题菜单中列对应的文字描述autoFill:是否自动扩展列以充满整个表格,默认为falseforceFit:是否强制调整表格列宽以适用表格的整体宽度,防止出现水平滚动条,默认为false主要方法:focusCell( Number row, Number col ):将焦点移到指定单元格focusRow( Number row ):将焦点移动指定行getCell( Number row, Number col ):取得指定单元格对应的td元素getHeaderCell( Number index ):取得指定表头对应的td元素getRow( Number index ):取得指定行对应的tr元素getRowClass( Record record, Number index, Object rowParams, Store store ):得到附加到表格行上的样式名record:当前行的数据记录对象index:当前行的索引rowParams:渲染时传入到行模板中的配置对象,通过它可以为行体定制样式,该对象只在enableRowBody为true时才生效,可能的属性 如下:body:渲染到行体中的HTML代码片段bodyStyle:应用到行体tr元素style属性的字符串cols:应用到行体td元素colspan属性的值,默认为总列数store:表格数据集refresh( [Boolean headersToo] ):刷新表格组件scrollToTop():滚动表格到顶端
实战1:
让gridpanel的滚动条自动滚动到最后一条记录(动态插入数据):
grid.getView().focusRow(vehiclePassInfoGrid.getStore().getCount()-1);
2:清除gridpanel中有行被选择的状态:
grid.getSelectionModel().clearSelections();
转自: