add extjs 6.0.1 sources

[extjs.git] / extjs / packages / core / src / list / Tree.js

/**\r
 * A lightweight component to display data in a simple tree structure.\r
 * @since 6.0.0\r
 */\r
Ext.define('Ext.list.Tree', {\r
    extend: 'Ext.Widget',\r
    xtype: 'treelist',\r
\r
    requires: [\r
        'Ext.list.RootTreeItem'\r
    ],\r
\r
    expanderFirstCls: Ext.baseCSSPrefix + 'treelist-expander-first',\r
    expanderOnlyCls: Ext.baseCSSPrefix + 'treelist-expander-only',\r
    highlightPathCls: Ext.baseCSSPrefix + 'treelist-highlight-path',\r
    microCls: Ext.baseCSSPrefix + 'treelist-micro',\r
\r
    uiPrefix: Ext.baseCSSPrefix + 'treelist-',\r
\r
    element: {\r
        reference: 'element',\r
        cls: Ext.baseCSSPrefix + 'treelist ' + Ext.baseCSSPrefix + 'unselectable',\r
        listeners: {\r
            click: 'onClick',\r
            mouseenter: 'onMouseEnter',\r
            mouseleave: 'onMouseLeave',\r
            mouseover: 'onMouseOver'\r
        },\r
        children: [{\r
            reference: 'toolsElement',\r
            cls: Ext.baseCSSPrefix + 'treelist-toolstrip',\r
            listeners: {\r
                click: 'onToolStripClick',\r
                mouseover: 'onToolStripMouseOver'\r
            }\r
        }]\r
    },\r
\r
    cachedConfig: {\r
        animation: {\r
            duration: 500,\r
            easing: 'ease'\r
        },\r
\r
        expanderFirst: true,\r
\r
        /**\r
         * @cfg {Boolean} expanderOnly\r
         * `true` to expand only on the click of the expander element. Setting this to\r
         * `false` will allow expansion on click of any part of the element.\r
         */\r
        expanderOnly: true\r
    },\r
\r
    config: {\r
        /**\r
         * @cfg {Object} [defaults]\r
         * The default configuration for the widgets created for tree items.\r
         *\r
         * @cfg {String} [defaults.xtype="treelistitem"]\r
         * The type of item to create. By default, items are `{@link Ext.list.TreeItem treelistitem}`\r
         * instances. This can be customized but this `xtype` must reference a class that\r
         * ultimately derives from the `{@link Ext.list.AbstractTreeItem}` base class.\r
         */\r
        defaults: {\r
            xtype: 'treelistitem'\r
        },\r
\r
        highlightPath: null,\r
\r
        iconSize: null,\r
\r
        indent: null,\r
\r
        micro: null,\r
\r
        overItem: null,\r
\r
        /**\r
         * @cfg {Ext.data.TreeModel} selection\r
         * \r
         * The current selected node.\r
         */\r
        selection: null, \r
\r
        /**\r
         * @cfg {Boolean} selectOnExpander\r
         * `true` to select the node when clicking the expander.\r
         */\r
        selectOnExpander: false,\r
\r
        /**\r
         * @cfg {Boolean} [singleExpand=false]\r
         * `true` if only 1 node per branch may be expanded.\r
         */\r
        singleExpand: null,\r
\r
        /**\r
         * @cfg {String/Object/Ext.data.TreeStore}\r
         * The data source to which this component is bound.\r
         */\r
        store: null,\r
\r
        ui: null\r
    },\r
\r
    twoWayBindable: {\r
        selection: 1\r
    },\r
\r
    publishes: {\r
        selection: 1\r
    },\r
\r
    defaultBindProperty: 'store',\r
\r
    constructor: function(config) {\r
        this.callParent([config]);\r
        // Important to publish the value here, so the vm can\r
        // will know our intial state.\r
        this.publishState('selection', this.getSelection());\r
    },\r
\r
    beforeLayout: function () {\r
        // Only called in classic, ignored in modern\r
        this.syncIconSize();\r
    },\r
\r
    destroy: function () {\r
        var me = this;\r
\r
        me.destroying = true;  // normally set in callParent\r
\r
        me.unfloatAll(); \r
        me.activeFloater = null;\r
        me.setSelection(null);\r
        me.setStore(null);\r
        me.callParent();\r
    },\r
\r
    updateOverItem: function (over, wasOver) {\r
        var map = {},\r
            state = 2,\r
            c, node;\r
\r
        // Walk up the node hierarchy starting at the "over" item and set their "over"\r
        // config appropriately (2 when over that row, 1 when over a descendant).\r
        //\r
        for (c = over; c; c = this.getItem(node.parentNode)) {\r
            node = c.getNode();\r
            map[node.internalId] = true;\r
\r
            c.setOver(state);\r
\r
            state = 1;\r
        }\r
\r
        if (wasOver) {\r
            // If we wasOver something else previously, walk up that node hierarchy and\r
            // set their "over" to 0... until we encounter some node that we are still\r
            // "over" (as determined in previous loop).\r
            //\r
            for (c = wasOver; c; c = this.getItem(node.parentNode)) {\r
                node = c.getNode();\r
                if (map[node.internalId]) {\r
                    break;\r
                }\r
\r
                c.setOver(0);\r
            }\r
        }\r
    },\r
\r
    applySelection: function(selection, oldSelection) {\r
        var store = this.getStore();\r
        if (!store) {\r
            selection = null;\r
        }\r
        if (selection && selection.get('selectable') === false) {\r
            selection = oldSelection;\r
        }\r
        return selection;\r
    },\r
\r
    updateSelection: function(selection, oldSelection) {\r
        var me = this,\r
            item;\r
\r
        if (!me.destroying) {\r
            // getItem has guards around null, so we don't\r
            // need to check for oldSelection/selection here\r
            item = me.getItem(oldSelection);\r
            if (item) {\r
                item.setSelected(false);\r
            }\r
\r
            item = me.getItem(selection);\r
            if (item) {\r
                item.setSelected(true);\r
            }\r
            me.fireEvent('selectionchange', me, selection);\r
        }\r
    },\r
\r
    applyStore: function (store) {\r
        return store && Ext.StoreManager.lookup(store, 'tree');\r
    },\r
\r
    updateStore: function (store, oldStore) {\r
        var me = this,\r
            root;\r
\r
        if (oldStore) {\r
            if (oldStore.getAutoDestroy()) {\r
                oldStore.destroy();\r
            } else {\r
                me.storeListeners.destroy();\r
            }\r
            me.removeRoot();\r
            me.storeListeners = null;\r
        }\r
\r
        if (store) {\r
            me.storeListeners = store.on({\r
                destroyable: true,\r
                scope: me,\r
                nodeappend: me.onNodeAppend,\r
                nodecollapse: me.onNodeCollapse,\r
                nodeexpand: me.onNodeExpand,\r
                nodeinsert: me.onNodeInsert,\r
                noderemove: me.onNodeRemove,\r
                rootchange: me.onRootChange,\r
                update: me.onNodeUpdate\r
            });\r
        \r
            root = store.getRoot();\r
            if (root) {\r
                me.createRootItem(root);\r
            }\r
        }\r
\r
        if (!me.destroying) {\r
            me.updateLayout();\r
        }\r
    },\r
\r
    updateExpanderFirst: function (expanderFirst) {\r
        this.element.toggleCls(this.expanderFirstCls, expanderFirst);\r
    },\r
\r
    updateExpanderOnly: function (value) {\r
        this.element.toggleCls(this.expanderOnlyCls, !value);\r
    },\r
\r
    updateHighlightPath: function (updatePath) {\r
        this.element.toggleCls(this.highlightPathCls, updatePath);\r
    },\r
\r
    updateMicro: function (micro) {\r
        var me = this;\r
\r
        if (!micro) {\r
            me.unfloatAll();\r
            me.activeFloater = null;\r
        }\r
\r
        me.element.toggleCls(me.microCls, micro);\r
    },\r
\r
    updateUi: function (ui, oldValue) {\r
        var el = this.element,\r
            uiPrefix = this.uiPrefix;\r
\r
        if (oldValue) {\r
            el.removeCls(uiPrefix + oldValue);\r
        }\r
        if (ui) {\r
            el.addCls(uiPrefix + ui);\r
        }\r
\r
        // Ensure that the cached iconSize is read from the style.\r
        delete this.iconSize;\r
        this.syncIconSize();\r
    },\r
\r
    /**\r
     * Get a child {@link Ext.list.AbstractTreeItem item} by node.\r
     * @param {Ext.data.TreeModel} node The node.\r
     * @return {Ext.list.AbstractTreeItem} The item. `null` if not found.\r
     */\r
    getItem: function (node) {\r
        var map = this.itemMap,\r
            ret;\r
\r
        if (node && map) {\r
            ret = map[node.internalId];\r
        }\r
\r
        return ret || null;\r
    },\r
\r
    /**\r
     * This method is called to populate and return a config object for new nodes. This\r
     * can be overridden by derived classes to manipulate properties or `xtype` of the\r
     * returned object. Upon return, the object is passed to `{@link Ext#create}` and the\r
     * reference is stored as part of this tree.\r
     *\r
     * The base class implementation will apply any configured `{@link #defaults}` to the\r
     * object it returns.\r
     *\r
     * @param {Ext.data.TreeModel} node The node backing the item.\r
     * @param {Ext.list.AbstractTreeItem} parent The parent item. This is never `null` but\r
     * may be an instance of `{@link Ext.list.RootTreeItem}`.\r
     * @return {Object} The config object to pass to `{@link Ext#create}` for the item.\r
     * @template\r
     */\r
    getItemConfig: function (node, parent) {\r
        return Ext.apply({\r
            parentItem: parent.isRootListItem ? null : parent,\r
            owner: this,\r
            node: node,\r
            indent: this.getIndent()\r
        }, this.getDefaults());\r
    },\r
\r
    privates: {\r
        checkForOutsideClick: function(e) {\r
            var floater = this.activeFloater;\r
            if (!floater.element.contains(e.target)) {\r
                this.unfloatAll();\r
            }\r
        },\r
\r
        collapsingForExpand: false,\r
\r
        /**\r
         * Create a new list item.\r
         * @param {Ext.data.TreeModel} node The node backing the item.\r
         * @param {Ext.list.AbstractTreeItem} parent The parent item.\r
         * @return {Ext.list.AbstractTreeItem} The list item.\r
         *\r
         * @private\r
         */\r
        createItem: function (node, parent) {\r
            var item = Ext.create(this.getItemConfig(node, parent)),\r
                toolEl;\r
\r
            if (parent.isRootListItem) {\r
                toolEl = item.getToolElement();\r
                if (toolEl) {\r
                    this.toolsElement.appendChild(toolEl);\r
                    toolEl.dom.setAttribute('data-recordId', node.internalId);\r
                    toolEl.isTool = true;\r
                }\r
            }\r
\r
            return (this.itemMap[node.internalId] = item); // <== assignment\r
        },\r
\r
        /**\r
         * Create a root item for this list.\r
         * @param {Ext.data.TreeModel} root The root node.\r
         *\r
         * @private\r
         */\r
        createRootItem: function (root) {\r
            var me = this,\r
                item;\r
\r
            me.itemMap = {};\r
            me.rootItem = item = new Ext.list.RootTreeItem({\r
                indent: me.getIndent(),\r
                node: root,\r
                owner: me\r
            });\r
\r
            me.element.appendChild(item.element);\r
\r
            me.itemMap[root.internalId] = item;\r
        },\r
\r
        floatItem: function(item, byHover) {\r
            var me = this,\r
                floater;\r
\r
            if (item.getFloated()) {\r
                return;\r
            }\r
\r
            me.unfloatAll();\r
\r
            me.activeFloater = floater = item;\r
            me.floatedByHover = byHover;\r
\r
            item.setFloated(true);\r
\r
            if (byHover) {\r
                item.getToolElement().on('mouseleave', me.checkForMouseLeave, me);\r
                floater.element.on('mouseleave', me.checkForMouseLeave, me);\r
            } else {\r
                Ext.on('mousedown', me.checkForOutsideClick, me);\r
            }\r
        },\r
\r
        /**\r
         * Handles when this element is clicked.\r
         * @param {Ext.event.Event} e The event.\r
         *\r
         * @private\r
         */\r
        onClick: function (e) {\r
            var item = e.getTarget('[data-recordId]'),\r
                id;\r
\r
            if (item) {\r
                id = item.getAttribute('data-recordId');\r
                item = this.itemMap[id];\r
                if (item) {\r
                    item.onClick(e);\r
                }\r
            }\r
        },\r
\r
        onMouseEnter: function (e) {\r
            this.onMouseOver(e);\r
        },\r
\r
        onMouseLeave: function () {\r
            this.setOverItem(null);\r
        },\r
\r
        onMouseOver: function (e) {\r
            var comp = Ext.Component.fromElement(e.getTarget());\r
\r
            this.setOverItem(comp && comp.isTreeListItem && comp);\r
        },\r
\r
        checkForMouseLeave: function (e) {\r
            var floater = this.activeFloater,\r
                relatedTarget = e.getRelatedTarget();\r
\r
            if (floater) {\r
                if (relatedTarget !== floater.getToolElement().dom && !floater.element.contains(relatedTarget)) {\r
                    this.unfloatAll();\r
                }\r
            }\r
        },\r
\r
        /**\r
         * Handles a node being appended to a parent.\r
         * @param {Ext.data.TreeModel} parentNode The parent node.\r
         * @param {Ext.data.TreeModel} node The appended node.\r
         *\r
         * @private\r
         */\r
        onNodeAppend: function (parentNode, node) {\r
            // If it's a root we'll handle it on rootchange\r
            if (parentNode) {\r
                var item = this.itemMap[parentNode.internalId];\r
\r
                if (item) {\r
                    item.nodeInsert(node, null);\r
                }\r
            }\r
        },\r
\r
        /**\r
         * Handles when a node collapses.\r
         * @param {Ext.data.TreeModel} node The node.\r
         *\r
         * @private\r
         */\r
        onNodeCollapse: function (node) {\r
            var item = this.itemMap[node.internalId];\r
\r
            if (item) {\r
                item.nodeCollapse(node, this.collapsingForExpand);\r
            }\r
        },\r
\r
        /**\r
         * Handles when a node expands.\r
         * @param {Ext.data.TreeModel} node The node.\r
         *\r
         * @private\r
         */\r
        onNodeExpand: function (node) {\r
            var me = this,\r
                item = me.itemMap[node.internalId],\r
                childNodes, len, i, parentNode, child;\r
\r
            if (item) {\r
                if (!item.isRootItem && me.getSingleExpand()) {\r
                    me.collapsingForExpand = true;\r
                    parentNode = (item.getParentItem() || me.rootItem).getNode();\r
                    childNodes = parentNode.childNodes;\r
                    for (i = 0, len = childNodes.length; i < len; ++i) {\r
                        child = childNodes[i];\r
                        if (child !== node) {\r
                            child.collapse();\r
                        }\r
                    }\r
                    me.collapsing = false;\r
                }\r
\r
                item.nodeExpand(node);\r
            }\r
        },\r
\r
        /**\r
         * Handles a node being inserted into a parent.\r
         * @param {Ext.data.TreeModel} parentNode The parent node.\r
         * @param {Ext.data.TreeModel} node The inserted node.\r
         * @param {Ext.data.TreeModel} refNode The node this was inserted before.\r
         *\r
         * @private\r
         */\r
        onNodeInsert: function (parentNode, node, refNode) {\r
            var item = this.itemMap[parentNode.internalId];\r
\r
            if (item) {\r
                item.nodeInsert(node, refNode);\r
            }\r
        },\r
\r
        /**\r
         * Handles a node being removed from a parent.\r
         * @param {Ext.data.TreeModel} parentNode The parent node.\r
         * @param {Ext.data.TreeModel} node The removed node.\r
         * @param {Boolean} isMove `true` if this node is moving inside the tree.\r
         *\r
         * @private\r
         */\r
        onNodeRemove: function (parentNode, node, isMove) {\r
            // If it's a move we don't need to do anything, we won't process it\r
            // as a removal, the addition will handle it all.\r
            // Also if the node being removed is the root we'll handle it in rootchange\r
            if (parentNode && !isMove) {\r
                var item = this.itemMap[parentNode.internalId];\r
\r
                if (item) {\r
                    item.nodeRemove(node);\r
                }\r
            }\r
        },  \r
\r
        /**\r
         * Handles when a node updates.\r
         * @param {Ext.data.TreeStore} store The store.\r
         * @param {Ext.data.TreeModel} node The node.\r
         * @param {String} type The update type.\r
         * @param {String[]} modifiedFieldNames The modified field names, if known.\r
         *\r
         * @private\r
         */\r
        onNodeUpdate: function (store, node, type, modifiedFieldNames) {\r
            var item = this.itemMap[node.internalId];\r
\r
            if (item) {\r
                item.nodeUpdate(node, modifiedFieldNames);\r
            }\r
        },\r
\r
        /**\r
         * Handles when the root node in the tree changes.\r
         * @param {Ext.data.TreeModel} root The root.\r
         *\r
         * @private\r
         */\r
        onRootChange: function (root) {\r
            this.removeRoot();\r
\r
            if (root) {\r
                this.createRootItem(root);\r
            }\r
\r
            this.updateLayout();\r
        },\r
\r
        /**\r
         * Removes a list item.\r
         * @param {Ext.data.TreeModel} node The node backing the item.\r
         *\r
         * @private\r
         */\r
        removeItem: function (node)  {\r
            var map = this.itemMap;\r
\r
            if (map) {\r
                delete map[node.internalId];\r
            }\r
        },\r
\r
        removeRoot: function () {\r
            var me = this,\r
                rootItem = me.rootItem;\r
\r
            if (rootItem) {\r
                me.element.removeChild(rootItem.element);\r
                me.rootItem = me.itemMap = Ext.destroy(rootItem);\r
            }\r
        },\r
\r
        /**\r
         * Handles when the toolstrip has a click.\r
         * @param {Ext.event.Event} e The event.\r
         *\r
         * @private\r
         */\r
        onToolStripClick: function(e) {\r
            var item = e.getTarget('[data-recordId]'),\r
                id;\r
\r
            if (item) {\r
                id = item.getAttribute('data-recordId');\r
                item = this.itemMap[id];\r
                if (item) {\r
                    if (item === this.activeFloater) {\r
                        this.unfloatAll();\r
                    } else {\r
                        this.floatItem(item, false);\r
                    }\r
                }\r
            }\r
        },\r
\r
        /**\r
         * Handles when the toolstrip has a mouseover.\r
         * @param {Ext.event.Event} e The event.\r
         *\r
         * @private\r
         */\r
        onToolStripMouseOver: function(e) {\r
            var item = e.getTarget('[data-recordId]'),\r
                id;\r
\r
            if (item) {\r
                id = item.getAttribute('data-recordId');\r
                item = this.itemMap[id];\r
                if (item) {\r
                    this.floatItem(item, true);\r
                }\r
            }\r
        },\r
\r
        syncIconSize: function() {\r
            var me = this,\r
                size = me.iconSize ||\r
                      (me.iconSize = parseInt(me.element.getStyle('background-position'), 10));\r
\r
            me.setIconSize(size);\r
        },\r
\r
        unfloatAll: function () {\r
            var me = this,\r
                floater = me.activeFloater;\r
\r
            if (floater) {\r
                floater.setFloated(false);\r
                me.activeFloater = null;\r
\r
                if (me.floatedByHover) {\r
                    floater.element.un('mouseleave', me.checkForMouseLeave, me);\r
                } else {\r
                    Ext.un('mousedown', me.checkForOutsideClick, me);\r
                }\r
            }\r
        },\r
\r
        defaultIconSize: 22,\r
\r
        updateIconSize: function (value) {\r
            this.setIndent(value || this.defaultIconSize);\r
        },\r
\r
        updateIndent: function (value) {\r
            var rootItem = this.rootItem;\r
\r
            if (rootItem) {\r
                rootItem.setIndent(value);\r
            }\r
        }\r
    }\r
});\r