Skip to content
WebBuilder 文档

Ext.view.Table

xtype 为 tableview 的 Ext JS 原生组件参考。

Updated View as Markdown

源码定义：ext-all-debug.js:114403。分类：数据视图、表格与树。

创建示例

var component = Ext.create("Ext.view.Table", {
  xtype: "tableview",
  altRowCls: Ext.baseCSSPrefix + 'grid-row-alt',
  ariaRole: 'grid',
  baseCls: Ext.baseCSSPrefix + 'grid-view',
  beforeFocusedItemCls: Ext.baseCSSPrefix + 'grid-row-before-focused',
  renderTo: Ext.getBody()
});

属性

属性 类型 默认值 说明 配置示例
altRowCls Mixed Ext.baseCSSPrefix + 'grid-row-alt' 配置 altRowCls 对应的 CSS 类名。 altRowCls: Ext.baseCSSPrefix + 'grid-row-alt'
ariaRole String 'grid' 组件在辅助技术中的 ARIA 角色。 ariaRole: 'grid'
baseCls Mixed Ext.baseCSSPrefix + 'grid-view' 配置 baseCls 对应的 CSS 类名。 baseCls: Ext.baseCSSPrefix + 'grid-view'
beforeFocusedItemCls Mixed Ext.baseCSSPrefix + 'grid-row-before-focused' 配置 beforeFocusedItemCls 对应的 CSS 类名。 beforeFocusedItemCls: Ext.baseCSSPrefix + 'grid-row-before-focused'
beforeOverItemCls Mixed Ext.baseCSSPrefix + 'grid-row-before-over' 配置 beforeOverItemCls 对应的 CSS 类名。 beforeOverItemCls: Ext.baseCSSPrefix + 'grid-row-before-over'
beforeSelectedItemCls Mixed Ext.baseCSSPrefix + 'grid-row-before-selected' 配置 beforeSelectedItemCls 对应的 CSS 类名。 beforeSelectedItemCls: Ext.baseCSSPrefix + 'grid-row-before-selected'
bodySelector String 'table' 配置组件的 bodySelector 选项。 bodySelector: 'table'
cellSelector String 'td.' + Ext.baseCSSPrefix + 'grid-cell' 配置组件的 cellSelector 选项。 cellSelector: 'td.' + Ext.baseCSSPrefix + 'grid-cell'
cellTpl Array [ 配置生成组件内容的 cellTpl 模板。 cellTpl: [
cellValues Object { 配置组件的 cellValues 选项。 cellValues: {
componentLayout String 'tableview' 组件采用的内部布局策略。 componentLayout: 'tableview'
dataRowSelector String 'tr.' + Ext.baseCSSPrefix + 'grid-data-row' 配置组件的 dataRowSelector 选项。 dataRowSelector: 'tr.' + Ext.baseCSSPrefix + 'grid-data-row'
dirtyCls Mixed Ext.baseCSSPrefix + 'grid-dirty-cell' 配置 dirtyCls 对应的 CSS 类名。 dirtyCls: Ext.baseCSSPrefix + 'grid-dirty-cell'
enableTextSelection Boolean - True to enable text selections. enableTextSelection: true
firstCls String Ext.baseCSSPrefix + 'grid-cell-first' =‘x-grid-cell-first’] A CSS class to add to the first cell in every row to enable special styling for the first column. If no styling is needed on the first column, this may be configured as null. firstCls: Ext.baseCSSPrefix + 'grid-cell-first'
focusedItemCls Mixed Ext.baseCSSPrefix + 'grid-row-focused' 配置 focusedItemCls 对应的 CSS 类名。 focusedItemCls: Ext.baseCSSPrefix + 'grid-row-focused'
getRowClass Object/null null 配置组件的 getRowClass 选项。 getRowClass: null
headerRowSelector String 'tr.' + Ext.baseCSSPrefix + 'grid-header-row' 配置组件的 headerRowSelector 选项。 headerRowSelector: 'tr.' + Ext.baseCSSPrefix + 'grid-header-row'
innerSelector String 'div.' + Ext.baseCSSPrefix + 'grid-cell-inner' 配置组件的 innerSelector 选项。 innerSelector: 'div.' + Ext.baseCSSPrefix + 'grid-cell-inner'
itemSelector String 'tr.' + Ext.baseCSSPrefix + 'grid-row' 配置组件的 itemSelector 选项。 itemSelector: 'tr.' + Ext.baseCSSPrefix + 'grid-row'
lastCls String Ext.baseCSSPrefix + 'grid-cell-last' =‘x-grid-cell-last’] A CSS class to add to the last cell in every row to enable special styling for the last column. If no styling is needed on the last column, this may be configured as null. lastCls: Ext.baseCSSPrefix + 'grid-cell-last'
markDirty Boolean true True to show the dirty cell indicator when a cell has been modified. markDirty: true
nodeContainerSelector String 'tbody' 配置组件的 nodeContainerSelector 选项。 nodeContainerSelector: 'tbody'
onBeforeCellClick Mixed Ext.emptyFn 配置 onBeforeCellClick 回调函数。 onBeforeCellClick: Ext.emptyFn
onBeforeCellContextMenu Mixed Ext.emptyFn 配置 onBeforeCellContextMenu 回调函数。 onBeforeCellContextMenu: Ext.emptyFn
onBeforeCellDblClick Mixed Ext.emptyFn 配置 onBeforeCellDblClick 回调函数。 onBeforeCellDblClick: Ext.emptyFn
onBeforeCellKeyDown Mixed Ext.emptyFn 配置 onBeforeCellKeyDown 回调函数。 onBeforeCellKeyDown: Ext.emptyFn
onBeforeCellMouseDown Mixed Ext.emptyFn 配置 onBeforeCellMouseDown 回调函数。 onBeforeCellMouseDown: Ext.emptyFn
onBeforeCellMouseUp Mixed Ext.emptyFn 配置 onBeforeCellMouseUp 回调函数。 onBeforeCellMouseUp: Ext.emptyFn
onCellClick Mixed Ext.emptyFn 配置 onCellClick 回调函数。 onCellClick: Ext.emptyFn
onCellContextMenu Mixed Ext.emptyFn 配置 onCellContextMenu 回调函数。 onCellContextMenu: Ext.emptyFn
onCellDblClick Mixed Ext.emptyFn 配置 onCellDblClick 回调函数。 onCellDblClick: Ext.emptyFn
onCellKeyDown Mixed Ext.emptyFn 配置 onCellKeyDown 回调函数。 onCellKeyDown: Ext.emptyFn
onCellMouseDown Mixed Ext.emptyFn 配置 onCellMouseDown 回调函数。 onCellMouseDown: Ext.emptyFn
onCellMouseUp Mixed Ext.emptyFn 配置 onCellMouseUp 回调函数。 onCellMouseUp: Ext.emptyFn
overItemCls Mixed Ext.baseCSSPrefix + 'grid-row-over' 配置 overItemCls 对应的 CSS 类名。 overItemCls: Ext.baseCSSPrefix + 'grid-row-over'
positionBody Boolean true 控制是否启用 positionBody 行为。 positionBody: true
refreshSelmodelOnRefresh Boolean false 控制是否启用 refreshSelmodelOnRefresh 行为。 refreshSelmodelOnRefresh: false
renderBuffer Mixed document.createElement('div') 配置组件的 renderBuffer 选项。 renderBuffer: document.createElement('div')
rowTpl Array [ 配置生成组件内容的 rowTpl 模板。 rowTpl: [
rowValues Object { 配置组件的 rowValues 选项。 rowValues: {
scrollToTop Mixed Ext.emptyFn 配置组件的 scrollToTop 选项。 scrollToTop: Ext.emptyFn
selectedCellCls Mixed Ext.baseCSSPrefix + 'grid-cell-selected' 配置 selectedCellCls 对应的 CSS 类名。 selectedCellCls: Ext.baseCSSPrefix + 'grid-cell-selected'
selectedItemCls Mixed Ext.baseCSSPrefix + 'grid-row-selected' 配置 selectedItemCls 对应的 CSS 类名。 selectedItemCls: Ext.baseCSSPrefix + 'grid-row-selected'
sizerSelector String 'col.' + Ext.baseCSSPrefix + 'grid-cell-heade... 配置组件的 sizerSelector 选项。 sizerSelector: 'col.' + Ext.baseCSSPrefix + 'grid-cell-heade...
stripeRows Boolean true True to stripe the rows. This causes the CSS class x-grid-row-alt to be added to alternate rows of the grid. A default CSS rule is provided which sets a background color, but you can override this with a rule which either overrides the background-color style using the !important modifier, or which uses a CSS selector of higher specificity. stripeRows: true
tableFocusedFirstCls Mixed Ext.baseCSSPrefix + 'grid-table-focused-first' 配置 tableFocusedFirstCls 对应的 CSS 类名。 tableFocusedFirstCls: Ext.baseCSSPrefix + 'grid-table-focused-first'
tableOverFirstCls Mixed Ext.baseCSSPrefix + 'grid-table-over-first' 配置 tableOverFirstCls 对应的 CSS 类名。 tableOverFirstCls: Ext.baseCSSPrefix + 'grid-table-over-first'
tableSelectedFirstCls Mixed Ext.baseCSSPrefix + 'grid-table-selected-first' 配置 tableSelectedFirstCls 对应的 CSS 类名。 tableSelectedFirstCls: Ext.baseCSSPrefix + 'grid-table-selected-first'
tableTpl Array [ 配置生成组件内容的 tableTpl 模板。 tableTpl: [
tableValues Object {} 配置组件的 tableValues 选项。 tableValues: {}
trackOver Boolean true 控制是否启用 trackOver 行为。 trackOver: true
unselectableCls Mixed Ext.baseCSSPrefix + 'unselectable' 配置 unselectableCls 对应的 CSS 类名。 unselectableCls: Ext.baseCSSPrefix + 'unselectable'
updateIndexes Mixed Ext.emptyFn 配置组件的 updateIndexes 选项。 updateIndexes: Ext.emptyFn

方法

方法 参数 说明 调用示例
initComponent `` 初始化组件及其子项。 执行时会保留父类默认行为、更新 body、autoScroll 状态。源码涉及 addEvents()、initFeatures()、getItemSelector()、callParent()。 component.initComponent()
getVisibleColumnManager `` 读取并返回 visibleColumnManager。 component.getVisibleColumnManager()
beforeLayout `` 在 layout 前执行预处理。 执行时会保留父类默认行为。源码涉及 callParent()。 component.beforeLayout()
moveColumn fromIdx, toIdx, colsToMove 处理 moveColumn 操作。源码涉及 getGridColumns()、getDataRowSelector()、getBodySelector()。 component.moveColumn(...)
addElListener eventName, fn, scope 添加 elListener。源码涉及 mon()。 component.addElListener(...)
getGridColumns `` 读取并返回 gridColumns。 component.getGridColumns()
getHeaderAtIndex index 读取并返回 headerAtIndex。 component.getHeaderAtIndex(...)
getCell record, column 读取并返回 cell。源码涉及 getNode()。 component.getCell(...)
getFeature id 读取并返回 feature。 component.getFeature(...)
findFeature ftype 查找 feature。 component.findFeature(...)
initFeatures grid 初始化 features。 执行时会更新 tableTpl、rowTpl 状态。源码涉及 constructFeatures()。 component.initFeatures(...)
renderTHead values, out 渲染 tHead。 component.renderTHead(...)
addHeaderFn `` 添加 headerFn。 执行时会更新 headerFns 状态。 component.addHeaderFn()
renderTFoot values, out 渲染 tFoot。 component.renderTFoot(...)
addFooterFn fn 添加 footerFn。 执行时会更新 footerFns 状态。 component.addFooterFn(...)
addTableTpl newTpl 添加 tableTpl。源码涉及 addTpl()。 component.addTableTpl(...)
addRowTpl newTpl 添加 rowTpl。源码涉及 addTpl()。 component.addRowTpl(...)
addCellTpl newTpl 添加 cellTpl。源码涉及 addTpl()。 component.addCellTpl(...)
addTpl which, newTpl 添加 tpl。 component.addTpl(...)
tplApplyOut values, out 处理 tplApplyOut 操作。源码涉及 before()、after()。 component.tplApplyOut(...)
constructFeatures `` 处理 constructFeatures 操作。 component.constructFeatures()
beforeRender `` 生成 before 的渲染结果。 执行时会保留父类默认行为。源码涉及 callParent()。 component.beforeRender()
onViewScroll e, t 处理 viewScroll 回调。 执行时会保留父类默认行为、派发 bodyscroll 事件。源码涉及 callParent()、fireEvent()。 component.onViewScroll(...)
createRowElement record, index 创建 rowElement。源码涉及 collectData()、getNodeContainerSelector()。 component.createRowElement(...)
bufferRender records, index 生成 buffer 的渲染结果。源码涉及 collectData()、getNodeContainerSelector()。 component.bufferRender(...)
collectData records, startIndex 处理 collectData 操作。 component.collectData(...)
collectNodes targetEl 处理 collectNodes 操作。源码涉及 getNodeContainer()。 component.collectNodes(...)
refreshSize `` 刷新 size。 执行时会保留父类默认行为。源码涉及 getBodySelector()、up()、callParent()。 component.refreshSize()
getMaskTarget `` 读取并返回 maskTarget。 component.getMaskTarget()
getRecord node 读取并返回 record。源码涉及 getNode()、hasActiveFeature()。 component.getRecord(...)
indexOf node 处理 indexOf 操作。源码涉及 getNode()。 component.indexOf(...)
indexInStore node 处理 indexInStore 操作。源码涉及 getRecord()。 component.indexInStore(...)
renderRows rows, viewStartIndex, out 渲染 rows。源码涉及 renderRow()。 component.renderRows(...)
renderColumnSizer out 渲染 columnSizer。源码涉及 getGridColumns()。 component.renderColumnSizer(...)
renderRow record, rowIdx, out 渲染 row。源码涉及 getRowId()、isRowStyleFirst()、getRowClass()。 component.renderRow(...)
renderCell column, record, recordIndex, rowIndex, columnIndex, out 渲染 cell。 component.renderCell(...)
getNode nodeInfo, dataRow 读取并返回 node。 执行时会保留父类默认行为。源码涉及 callParent()。 component.getNode(...)
getRowId record 读取并返回 rowId。 component.getRowId(...)
constructRowId internalId 处理 constructRowId 操作。 component.constructRowId(...)
getNodeById id, dataRow 读取并返回 nodeById。源码涉及 constructRowId()、retrieveNode()。 component.getNodeById(...)
getNodeByRecord record, dataRow 读取并返回 nodeByRecord。源码涉及 getRowId()、retrieveNode()。 component.getNodeByRecord(...)
retrieveNode id, dataRow 获取 node。 component.retrieveNode(...)
getNodeContainer `` 读取并返回 nodeContainer。 component.getNodeContainer()
getBodySelector `` 读取并返回 bodySelector。 component.getBodySelector()
getNodeContainerSelector `` 读取并返回 nodeContainerSelector。 component.getNodeContainerSelector()
getColumnSizerSelector header 读取并返回 columnSizerSelector。 component.getColumnSizerSelector(...)
getItemSelector `` 读取并返回 itemSelector。 component.getItemSelector()
getDataRowSelector `` 读取并返回 dataRowSelector。 component.getDataRowSelector()
getCellSelector header 读取并返回 cellSelector。 component.getCellSelector(...)
getCellInnerSelector header 读取并返回 cellInnerSelector。源码涉及 getCellSelector()。 component.getCellInnerSelector(...)
addRowCls rowInfo, cls 添加 rowCls。源码涉及 getNode()。 component.addRowCls(...)
removeRowCls rowInfo, cls 移除 rowCls。源码涉及 getNode()。 component.removeRowCls(...)
setHighlightedItem item 设置 highlightedItem。 执行时会保留父类默认行为。源码涉及 isRowStyleFirst()、toggleRowTableCls()、getNode()、callParent()。 component.setHighlightedItem(...)
onRowSelect rowIdx 处理 rowSelect 回调。源码涉及 addRowCls()、isRowStyleFirst()、toggleRowTableCls()、removeRowCls()。 component.onRowSelect(...)
onRowDeselect rowIdx 处理 rowDeselect 回调。源码涉及 removeRowCls()、isRowStyleFirst()、toggleRowTableCls()。 component.onRowDeselect(...)
onCellSelect position 处理 cellSelect 回调。源码涉及 getCellByPosition()。 component.onCellSelect(...)
onCellDeselect position 处理 cellDeselect 回调。源码涉及 getCellByPosition()。 component.onCellDeselect(...)
getCellByPosition position, returnDom 读取并返回 cellByPosition。源码涉及 getNode()、getCellSelector()。 component.getCellByPosition(...)
getFocusEl `` 读取并返回 focusEl。 component.getFocusEl()
onRowFocus rowIdx, highlight, supressFocus 处理 rowFocus 回调。源码涉及 addRowCls()、isRowStyleFirst()、toggleRowTableCls()、focusRow()。 component.onRowFocus(...)
focusRow row, delay 将焦点移动到 row。 执行时会派发 rowfocus 事件。源码涉及 getFocusTask()、isVisible()、getNode()、scrollRowIntoView()。 component.focusRow(...)
scrollRowIntoView row 滚动到 rowIntoView。源码涉及 getNode()。 component.scrollRowIntoView(...)
focusCell position, delay 将焦点移动到 cell。 执行时会派发 cellfocus 事件。源码涉及 getFocusTask()、isVisible()、getCellByPosition()、scrollCellIntoView()。 component.focusCell(...)
doFocus rowDom 执行 focus 操作。 执行时会更新 ignoreScroll、focusEl 状态。 component.doFocus(...)
scrollCellIntoView cell 滚动到 cellIntoView。源码涉及 getCellByPosition()。 component.scrollCellIntoView(...)
scrollByDelta delta, dir 滚动到 byDelta。 component.scrollByDelta(...)
isDataRow row 判断 dataRow 状态。 component.isDataRow(...)
syncRowHeights firstRow, secondRow 同步 rowHeights。 component.syncRowHeights(...)
onIdChanged store, rec, oldId, newId, oldInternalId 处理 idChanged 回调。源码涉及 getNodeById()、getRowId()。 component.onIdChanged(...)
onUpdate store, record, operation, changedFieldNames 处理 update 回调。 执行时会派发 itemupdate 事件。源码涉及 getNodeByRecord()、createRowElement()、getNode()、updateColumns()。 component.onUpdate(...)
updateColumns record, oldRowDom, newRowDom, columns, changedFieldNames 更新 columns。源码涉及 getCellSelector()、shouldUpdateCell()。 component.updateColumns(...)
shouldUpdateCell record, column, changedFieldNames 判断是否应执行 updateCell。 component.shouldUpdateCell(...)
refresh `` 刷新组件。 执行时会保留父类默认行为。源码涉及 callParent()、refreshSelection()。 component.refresh()
refreshSelection `` 刷新 selection。源码涉及 onRowSelect()、indexOf()、getNode()。 component.refreshSelection()
processItemEvent record, row, rowIndex, e 处理 itemEvent。 执行时会保留父类默认行为、派发 uievent、beforecell、cell 事件。源码涉及 indexInStore()、getCellSelector()、statics()、getSelectionModel()。 component.processItemEvent(...)
processSpecialEvent e 处理 specialEvent。 执行时会保留父类默认行为。源码涉及 callParent()、getTargetEl()。 component.processSpecialEvent(...)
expandToFit header 将 expand 转换为 fit。源码涉及 autoSizeColumn()。 component.expandToFit(...)
autoSizeColumn header 自动计算尺寸 column。源码涉及 getMaxContentWidth()。 component.autoSizeColumn(...)
getMaxContentWidth header 读取并返回 maxContentWidth。源码涉及 getColumnSizerSelector()、getCellPaddingAfter()。 component.getMaxContentWidth(...)
getPositionByEvent e 读取并返回 positionByEvent。源码涉及 getRecord()、getHeaderByCell()、getPosition()。 component.getPositionByEvent(...)
getHeaderByCell cell 读取并返回 headerByCell。 component.getHeaderByCell(...)
walkCells pos, direction, e, preventWrap, verifierFn, scope 遍历 cells。源码涉及 walkRows()。 component.walkCells(...)
walkRows startRow, distance 遍历 rows。源码涉及 getNode()。 component.walkRows(...)
walkRecs startRec, distance 遍历 recs。源码涉及 getNodeByRecord()。 component.walkRecs(...)
getFirstVisibleRowIndex `` 读取并返回 firstVisibleRowIndex。源码涉及 indexOf()、getNode()。 component.getFirstVisibleRowIndex()
getLastVisibleRowIndex `` 读取并返回 lastVisibleRowIndex。源码涉及 indexOf()、getNode()。 component.getLastVisibleRowIndex()
getHeaderCt `` 读取并返回 headerCt。 component.getHeaderCt()
getPosition record, header 读取并返回 position。 component.getPosition(...)
beforeDestroy `` 在 destroy 前执行预处理。 执行时会保留父类默认行为。源码涉及 callParent()。 component.beforeDestroy()
onDestroy `` 处理 destroy 回调。 执行时会保留父类默认行为、更新 featuresMC 状态。源码涉及 callParent()。 component.onDestroy()
onReplace store, startIndex, oldRecords, newRecords 处理 replace 回调。 执行时会保留父类默认行为。源码涉及 callParent()、doStripeRows()、indexOf()、onRowDeselect()。 component.onReplace(...)
onAdd ds, records, index 处理 add 回调。 执行时会保留父类默认行为。源码涉及 callParent()、doStripeRows()、indexOf()、onRowDeselect()。 component.onAdd(...)
onRemove ds, records, indexes 处理 remove 回调。 执行时会保留父类默认行为。源码涉及 callParent()、doStripeRows()、onRowDeselect()、getNode()。 component.onRemove(...)
doStripeRows startRow, endRow 执行 stripeRows 操作。源码涉及 getNodes()。 component.doStripeRows(...)
repaintRow rowIdx 重绘 row。源码涉及 getNode()。 component.repaintRow(...)
getRowStyleTableEl item /* view item or row index */ 读取并返回 rowStyleTableEl。源码涉及 getNode()、hasActiveFeature()。 component.getRowStyleTableEl(...)
toggleRowTableCls item /* view item or row index */, cls, enabled 切换 rowTableCls。源码涉及 getNode()。 component.toggleRowTableCls(...)
isRowStyleFirst item /* view item or row index */ 判断 rowStyleFirst 状态。源码涉及 getNode()、indexOf()、hasActiveFeature()。 component.isRowStyleFirst(...)
hasActiveFeature `` 检查是否存在 activeFeature。 component.hasActiveFeature()
getCellPaddingAfter cell 读取并返回 cellPaddingAfter。 component.getCellPaddingAfter(...)
hasVerticalScroll `` 检查是否存在 verticalScroll。源码涉及 getHeight()。 component.hasVerticalScroll()

事件

事件 说明 监听示例
beforecellclick Fired before the cell click is processed. Return false to cancel the default action. listeners: { beforecellclick: function () {} }
beforecellcontextmenu Fired before the cell right click is processed. Return false to cancel the default action. listeners: { beforecellcontextmenu: function () {} }
beforecelldblclick Fired before the cell double click is processed. Return false to cancel the default action. listeners: { beforecelldblclick: function () {} }
beforecellkeydown Fired before the cell key down is processed. Return false to cancel the default action. listeners: { beforecellkeydown: function () {} }
beforecellmousedown Fired before the cell mouse down is processed. Return false to cancel the default action. listeners: { beforecellmousedown: function () {} }
beforecellmouseup Fired before the cell mouse up is processed. Return false to cancel the default action. listeners: { beforecellmouseup: function () {} }
cellclick Fired when table cell is clicked. listeners: { cellclick: function () {} }
cellcontextmenu Fired when table cell is right clicked. listeners: { cellcontextmenu: function () {} }
celldblclick Fired when table cell is double clicked. listeners: { celldblclick: function () {} }
cellkeydown Fired when the keydown event is captured on the cell. listeners: { cellkeydown: function () {} }
cellmousedown Fired when the mousedown event is captured on the cell. listeners: { cellmousedown: function () {} }
cellmouseup Fired when the mouseup event is captured on the cell. listeners: { cellmouseup: function () {} }
Navigation

Type to search…

↑↓ navigate↵ selectEsc close