/** * */Ext.define('Ext.grid.cell.Tree', { extend: 'Ext.grid.cell.Cell', xtype: 'treecell', isTreeCell: true, /** * @property classCls * @inheritdoc */ classCls: Ext.baseCSSPrefix + 'treecell', collapsedCls: Ext.baseCSSPrefix + 'collapsed', expandedCls: Ext.baseCSSPrefix + 'expanded', leafCls: Ext.baseCSSPrefix + 'leaf', expandableCls: Ext.baseCSSPrefix + 'expandable', withIconCls: Ext.baseCSSPrefix + 'with-icon', withoutIconCls: Ext.baseCSSPrefix + 'no-icon', loadingCls: Ext.baseCSSPrefix + 'loading', selectedCls: Ext.baseCSSPrefix + 'selected', config: { /** * @cfg {String} iconClsProperty * The property from the associated record to map for the {@link #iconCls} config. */ iconClsProperty: 'iconCls', /** * @cfg iconCls * @inheritdoc Ext.panel.Header#cfg-iconCls * @localdoc **Note:** This value is taken from the underlying {@link #node}. */ iconCls: null, indent: null, /** * @cfg {String} text * The text for this item. This value is taken from * the underlying {@link #node}. */ text: { lazy: true, $value: '' } }, // See theme-base/src/grid/cell/Tree.scss when maintaining this structure. // Ancestor classes on containing elements are used to style elements in this structure. // This involves nested child selectors which rely on this structure. /** * @property element * @inheritdoc */ element: { reference: 'element', children: [{ reference: 'innerElement', cls: Ext.baseCSSPrefix + 'inner-el', children: [{ reference: 'indentElement', cls: Ext.baseCSSPrefix + 'indent-el' }, { reference: 'expanderElement', cls: Ext.baseCSSPrefix + 'expander-el ' + Ext.baseCSSPrefix + 'font-icon' }, { reference: 'iconElement', cls: Ext.baseCSSPrefix + 'icon-el ' + Ext.baseCSSPrefix + 'font-icon' }, { reference: 'bodyElement', cls: Ext.baseCSSPrefix + 'body-el', uiCls: 'body-el' }] }] }, /** * @cfg toolDefaults * @inheritdoc */ toolDefaults: { zone: 'tail' }, constructor: function (config) { this.callParent([ config ]); this.element.on({ scope: this, tap: 'maybeToggle' }); }, /** * Expand this tree node if collapse, collapse it if expanded. */ toggle: function() { var me = this, record = me.getRecord(); if (record.isExpanded()) { me.collapse(); } else if (record.isExpandable()) { me.expand(); } }, /** * Collapse this tree node. */ collapse: function() { var me = this, record = me.getRecord(); me.getGrid().fireEventedAction('nodecollapse', [me.parent, record, 'collapse'], 'doToggle', this); }, /** * Expand this tree node. */ expand: function() { var me = this, record = me.getRecord(), tree = me.getGrid(), siblings, i, len, sibling; tree.fireEventedAction('nodeexpand', [me.parent, record, 'expand'], 'doToggle', me); // Collapse any other expanded sibling if tree is singleExpand if (record.isExpanded && !record.isRoot() && tree.getSingleExpand()) { siblings = record.parentNode.childNodes; for (i = 0, len = siblings.length; i < len; ++i) { sibling = siblings[i]; if (sibling !== record) { sibling.collapse(); } } } }, refresh: function (ctx) { this.callParent([ctx]); var record = this.getRecord(); if (record) { this.doNodeUpdate(record); } }, updateIconCls: function (iconCls, oldIconCls) { var me = this, el = me.element, noIcon = !iconCls; me.iconElement.replaceCls(oldIconCls, iconCls); el.toggleCls(me.withIconCls, !noIcon); el.toggleCls(me.withoutIconCls, noIcon); }, updateUi: function (ui, oldUi) { this.callParent([ui, oldUi]); // ensure indent is measured from the dom when syncIndent() is called this._indent = null; this.syncIndent(); }, privates: { /** * Update properties after a record update. * * @param {Ext.data.TreeModel} record The node. * * @private */ doNodeUpdate: function (record) { var me = this, iconClsProperty = me.getIconClsProperty(), el = me.element; if (iconClsProperty) { me.setIconCls(record.data[iconClsProperty]); } el.toggleCls(me.loadingCls, record.data.loading); el.toggleCls(me.leafCls, record.isLeaf()); me.syncExpandCls(); me.syncIndent(); }, getGrid: function() { return this.row.grid; }, syncExpandCls: function () { if (!this.updatingExpandCls) { var me = this, record = me.getRecord(), expandable = record.isExpandable(), element = me.element, expanded = record.isExpanded(), expandedCls = me.expandedCls, collapsedCls = me.collapsedCls; me.updatingExpandCls = true; element.toggleCls(me.expandableCls, expandable); if (expandable) { element.toggleCls(expandedCls, expanded); element.toggleCls(collapsedCls, !expanded); } else { element.removeCls([expandedCls, collapsedCls]); } me.updatingExpandCls = false; } }, syncIndent: function() { var me = this, column = me.getColumn(), indentSize, record, depth; if (column) { indentSize = column._indentSize; record = me.getRecord(); if (!indentSize) { column._indentSize = indentSize = parseInt(me.el.getStyle('background-position'), 10); } if (record) { depth = record.getTreeStore().rootVisible ? record.data.depth : record.data.depth - 1; me.indentElement.dom.style.width = (depth * indentSize) + 'px'; } } }, /** * @private */ maybeToggle: function(e) { var me = this, record = me.getRecord(), wasExpanded = record.isExpanded(); if (!record.isLeaf() && (!me.getGrid().getExpanderOnly() || e.target === me.expanderElement.dom)) { me.toggle(); } // Toggling click does not continue to bubble the event to the view. // TODO: When NavigationModel implemented, that still has to recieve the events. if (record.isExpanded() !== wasExpanded) { e.nodeToggled = true; e.stopEvent(); } }, doToggle: function(row, record, fn) { record[fn](); } }});