Skip to content

Ext.tree.View

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

Updated View as Markdown

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

创建示例

var component = Ext.create("Ext.tree.View", {
  xtype: "treeview",
  ariaRole: 'tree',
  checkboxSelector: '.' + Ext.baseCSSPrefix + 'tree-checkbox',
  collapseDuration: 250,
  deferInitialRefresh: false,
  renderTo: Ext.getBody()
});

属性

属性 类型 默认值 说明 配置示例
ariaRole String 'tree' 组件在辅助技术中的 ARIA 角色。 ariaRole: 'tree'
checkboxSelector String '.' + Ext.baseCSSPrefix + 'tree-checkbox' 配置组件的 checkboxSelector 选项。 checkboxSelector: '.' + Ext.baseCSSPrefix + 'tree-checkbox'
collapseDuration Number 250 配置组件的 collapseDuration 选项。 collapseDuration: 250
deferInitialRefresh Boolean false 控制是否启用 deferInitialRefresh 行为。 deferInitialRefresh: false
expandDuration Number 250 配置组件的 expandDuration 选项。 expandDuration: 250
expandedCls Mixed Ext.baseCSSPrefix + 'grid-tree-node-expanded' 配置 expandedCls 对应的 CSS 类名。 expandedCls: Ext.baseCSSPrefix + 'grid-tree-node-expanded'
expanderIconOverCls Mixed Ext.baseCSSPrefix + 'tree-expander-over' 配置 expanderIconOverCls 对应的 CSS 类名。 expanderIconOverCls: Ext.baseCSSPrefix + 'tree-expander-over'
expanderSelector String '.' + Ext.baseCSSPrefix + 'tree-expander' 配置组件的 expanderSelector 选项。 expanderSelector: '.' + Ext.baseCSSPrefix + 'tree-expander'
isTreeView Boolean true 控制是否启用 isTreeView 行为。 isTreeView: true
leafCls Mixed Ext.baseCSSPrefix + 'grid-tree-node-leaf' 配置 leafCls 对应的 CSS 类名。 leafCls: Ext.baseCSSPrefix + 'grid-tree-node-leaf'
loadingCls Mixed Ext.baseCSSPrefix + 'grid-tree-loading' 配置 loadingCls 对应的 CSS 类名。 loadingCls: Ext.baseCSSPrefix + 'grid-tree-loading'
loadMask Boolean false 控制是否启用 loadMask 行为。 loadMask: false
nodeAnimWrapCls Mixed Ext.baseCSSPrefix + 'tree-animator-wrap' 配置 nodeAnimWrapCls 对应的 CSS 类名。 nodeAnimWrapCls: Ext.baseCSSPrefix + 'tree-animator-wrap'
rootVisible Boolean true 控制是否启用 rootVisible 行为。 rootVisible: true
stripeRows Boolean false 控制是否启用 stripeRows 行为。 stripeRows: false
toggleOnDblClick Boolean true 控制是否启用 toggleOnDblClick 行为。 toggleOnDblClick: true
treeRowTpl Array [ 配置生成组件内容的 treeRowTpl 模板。 treeRowTpl: [

方法

方法 参数 说明 调用示例
initComponent `` 初始化组件及其子项。 执行时会保留父类默认行为、更新 animatestore 状态。源码涉及 setRootNode()addEvents()callParent()addRowTpl() component.initComponent()
onBeforeFill treeStore, fillRoot 处理 beforeFill 回调。 component.onBeforeFill(...)
onFillComplete treeStore, fillRoot, newNodes 处理 fillComplete 回调。源码涉及 onAdd()refreshPartner() component.onFillComplete(...)
onBeforeSort `` 处理 beforeSort 回调。 component.onBeforeSort()
onSort o 处理 sort 回调。源码涉及 refresh()refreshPartner() component.onSort(...)
refreshPartner `` 刷新 partner component.refreshPartner()
getMaskStore `` 读取并返回 maskStore component.getMaskStore()
afterRender `` 生成 after 的渲染结果。 执行时会保留父类默认行为。源码涉及 callParent() component.afterRender()
afterComponentLayout `` componentLayout 后执行后处理。 执行时会保留父类默认行为。源码涉及 callParent()getWidth() component.afterComponentLayout()
processUIEvent e 处理 uIEvent。 执行时会保留父类默认行为。源码涉及 callParent() component.processUIEvent(...)
onClear `` 处理 clear 回调。 component.onClear()
setRootNode node 设置 rootNode。 执行时会更新 node 状态。 component.setRootNode(...)
onCheckboxChange e, t 处理 checkboxChange 回调。源码涉及 getItemSelector()getTargetEl()onCheckChange()getRecord() component.onCheckboxChange(...)
onCheckChange record 处理 checkChange 回调。 执行时会派发 beforecheckchangecheckchange 事件。源码涉及 fireEvent() component.onCheckChange(...)
getChecked `` 读取并返回 checked component.getChecked()
isItemChecked rec 判断 itemChecked 状态。 component.isItemChecked(...)
createAnimWrap record, index 创建 animWrap。源码涉及 getNode()renderColumnSizer() component.createAnimWrap(...)
getAnimWrap parent, bubble 读取并返回 animWrap component.getAnimWrap(...)
doAdd records, index 执行 add 操作。 执行时会保留父类默认行为。源码涉及 bufferRender()getAnimWrap()callParent()indexInStore() component.doAdd(...)
onRemove ds, records, indexes 处理 remove 回调。 执行时会派发 itemremove 事件。源码涉及 refresh()doRemove()fireEvent() component.onRemove(...)
doRemove record, index 执行 remove 操作。 执行时会保留父类默认行为。源码涉及 getAnimWrap()callParent() component.doRemove(...)
onBeforeExpand parent, records, index 处理 beforeExpand 回调。源码涉及 getNode()getAnimWrap()createAnimWrap() component.onBeforeExpand(...)
onExpand parent 处理 expand 回调。 执行时会派发 afteritemexpandafteritemexpand 事件。源码涉及 getNode()indexOf()ensureSingleExpand()getAnimWrap() component.onExpand(...)
onBeforeCollapse parent, records, index, callback, scope 处理 beforeCollapse 回调。 执行时会更新 onCollapseCallbackonCollapseScope 状态。源码涉及 getAnimWrap()createAnimWrap()onRowDeselect()indexOf() component.onBeforeCollapse(...)
onCollapse parent 处理 collapse 回调。 执行时会派发 afteritemcollapseafteritemcollapse 事件、更新 onCollapseCallbackonCollapseScope 状态。源码涉及 getNode()indexOf()getAnimWrap()refreshSelection() component.onCollapse(...)
isAnimating node 判断 animating 状态。 component.isAnimating(...)
expand record, deep, callback, scope 展开组件。 component.expand(...)
collapse record, deep, callback, scope 收起组件。 component.collapse(...)
toggle record, deep, callback, scope 切换当前组件。源码涉及 collapse()expand() component.toggle(...)
onItemDblClick record, item, index 处理 itemDblClick 回调。 执行时会保留父类默认行为。源码涉及 callParent()toggle() component.onItemDblClick(...)
onBeforeItemMouseDown record, item, index, e 处理 beforeItemMouseDown 回调。 执行时会保留父类默认行为。源码涉及 callParent() component.onBeforeItemMouseDown(...)
onItemClick record, item, index, e 处理 itemClick 回调。 执行时会保留父类默认行为。源码涉及 toggle()callParent() component.onItemClick(...)
onExpanderMouseOver e, t 处理 expanderMouseOver 回调。 component.onExpanderMouseOver(...)
onExpanderMouseOut e, t 处理 expanderMouseOut 回调。 component.onExpanderMouseOut(...)
getStoreListeners `` 读取并返回 storeListeners。 执行时会保留父类默认行为。源码涉及 callParent() component.getStoreListeners()
onBindStore `` 处理 bindStore 回调。 执行时会保留父类默认行为。源码涉及 getTreeStore()callParent()mon() component.onBindStore()
onUnbindStore `` 处理 unbindStore 回调。 执行时会保留父类默认行为。源码涉及 getTreeStore()callParent()mun() component.onUnbindStore()
getTreeStore `` 读取并返回 treeStore component.getTreeStore()
ensureSingleExpand node 处理 ensureSingleExpand 操作。 component.ensureSingleExpand(...)
shouldUpdateCell record, column, changedFieldNames 判断是否应执行 updateCell。 执行时会保留父类默认行为。源码涉及 callParent() component.shouldUpdateCell(...)
onStoreWrite store, operation 处理 storeWrite 回调。 component.onStoreWrite(...)
onStoreDataChanged store, operation 处理 storeDataChanged 回调。 component.onStoreDataChanged(...)

事件

事件 说明 监听示例
afteritemcollapse 树节点收起完成后触发。 源码在 onCollapse() 中通过 fireEvent() 触发。 listeners: { afteritemcollapse: function () {} }
afteritemexpand 树节点展开完成后触发。 源码在 onExpand() 中通过 fireEvent() 触发。 listeners: { afteritemexpand: function () {} }
nodedragover 拖动节点悬停在目标节点上方时触发。 源码只在事件声明处列出该事件;实际触发由继承的基类或关联对象负责。 listeners: { nodedragover: function () {} }
Navigation

Type to search…

↑↓ navigate↵ selectEsc close