add extjs 6.0.1 sources

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

/**\r
 * The base class for all items in the `{@link Ext.list.Tree treelist}`.\r
 * @since 6.0.0\r
 */\r
Ext.define('Ext.list.AbstractTreeItem', {\r
    extend: 'Ext.Widget',\r
\r
    isTreeListItem: true,\r
\r
    /**\r
     * @method setExpandable\r
     * @ignore\r
     */\r
    \r
    /**\r
     * @method setExpanded\r
     * @ignore\r
     */\r
    \r
    /**\r
     * @method setIconCls\r
     * @ignore\r
     */\r
    \r
    /**\r
     * @method setLeaf\r
     * @ignore\r
     */\r
    \r
    /**\r
     * @method setOwner\r
     * @ignore\r
     */\r
    \r
    /**\r
     * @method setLoading\r
     * @ignore\r
     */\r
    \r
    /**\r
     * @method setNode\r
     * @ignore\r
     */\r
    \r
    /**\r
     * @method setParentItem\r
     * @ignore\r
     */\r
    \r
    /**\r
     * @method setText\r
     * @ignore\r
     */\r
\r
    cachedConfig: {\r
        /**\r
         * @cfg {Boolean} expandable\r
         * `true` if this item is expandable. This value is taken from\r
         * the underlying {@link #node}.\r
         */\r
        expandable: false,\r
\r
        /**\r
         * @cfg {Boolean} expanded\r
         * `true` if this item is expanded. This value is taken from\r
         * the underlying {@link #node}.\r
         */\r
        expanded: false,\r
\r
        /**\r
         * @cfg {Boolean} floated\r
         * `true` if this item is current floated. This mode applies when the owning\r
         * `{@link Ext.list.Tree treelist}` is in `{@link Ext.list.Tree#micro micro}`\r
         * mode and the sub-tree under this item should be presented as a floating\r
         * element.\r
         */\r
        floated: false,\r
\r
        /**\r
         * @cfg {String} iconCls\r
         * @inheritdoc Ext.panel.Header#cfg-iconCls\r
         * @localdoc **Note:** This value is taken from the underlying {@link #node}.\r
         */\r
        iconCls: '',\r
\r
        /**\r
         * @cfg {Boolean} leaf\r
         * `true` if this item is a leaf. This value is taken from\r
         * the underlying {@link #node}.\r
         */\r
        leaf: true,\r
\r
        /**\r
         * @cfg {Boolean} loading\r
         * `true` if this item is currently loading data. This value is taken from\r
         * the underlying {@link #node}.\r
         */\r
        loading: false,\r
\r
        /**\r
         * @cfg {Boolean} selected\r
         * `true` if this is the selected item in the tree.\r
         */\r
        selected: false,\r
\r
        /**\r
         * @cfg {Boolean} selectedParent\r
         * `true` if this item contains the {@link #selected} item in the tree.\r
         */\r
        selectedParent: false\r
    },\r
\r
    config: {\r
        /**\r
         * @cfg {String} iconClsProperty\r
         * The property from the {@link #node} to map for the {@link #iconCls} config.\r
         */\r
        iconClsProperty: 'iconCls',\r
\r
        indent: null,\r
\r
        /**\r
         * @cfg {Ext.list.Tree} owner\r
         * The owning list for this container.\r
         */\r
        owner: null,\r
\r
        /**\r
         * @cfg {Ext.data.TreeModel} node\r
         * The backing node for this item.\r
         */\r
        node: null,\r
\r
        /**\r
         * @cfg {Number} over\r
         * One of three possible values:\r
         *\r
         *   - 0 if mouse is not over this item or any of its descendants.\r
         *   - 1 if mouse is not over this item but is over one of this item's descendants.\r
         *   - 2 if mouse is directly over this item.\r
         */\r
        over: null,\r
\r
        /**\r
         * @cfg {Ext.list.AbstractTreeItem} parentItem\r
         * The parent item for this item. \r
         */\r
        parentItem: null,\r
\r
        /**\r
         * @cfg {String} text\r
         * The text for this item. This value is taken from\r
         * the underlying {@link #node}.\r
         */\r
        text: {\r
            lazy: true,\r
            $value: ''\r
        },\r
\r
        /**\r
         * @cfg {String} textProperty\r
         * The property from the {@link #node} to map for the {@link #text} config.\r
         */\r
        textProperty: 'text'\r
    },\r
\r
    updateNode: function (node) {\r
        if (node) {\r
            var me = this,\r
                map = me.itemMap,\r
                childNodes, owner, len, i, item, child;\r
\r
            me.element.dom.setAttribute('data-recordId', node.internalId);\r
\r
            if (!map) {\r
                childNodes = node.childNodes;\r
                owner = me.getOwner();\r
                me.itemMap = map = {};\r
                for (i = 0, len = childNodes.length; i < len; ++i) {\r
                    child = childNodes[i];\r
                    item = owner.createItem(child, me);\r
                    map[child.internalId] = item;\r
                    me.insertItem(item, null);\r
                }\r
            }\r
\r
            me.setExpanded(node.isExpanded());\r
            me.doNodeUpdate(node);\r
        }\r
    },\r
\r
    updateSelected: function(selected) {\r
        if (!this.isConfiguring) {\r
            var parent = this.getParentItem();\r
            while (parent && !parent.isRootListItem) {\r
                parent.setSelectedParent(selected);\r
                parent = parent.getParentItem();\r
            }\r
        }\r
    },\r
\r
    /**\r
     * Collapse this item. Does nothing if already collapsed.\r
     */\r
    collapse: function () {\r
        this.getNode().collapse();\r
    },\r
\r
    /**\r
     * Expand this item. Does nothing if already expanded.\r
     */\r
    expand: function () {\r
        this.getNode().expand();\r
    },\r
\r
    /**\r
     * @method\r
     * Gets the element to be used for the tree when it is in \r
     * {@link Ext.list.Tree#micro micro} mode.\r
     * @return {Ext.dom.Element} The element.\r
     *\r
     * @protected\r
     * @template\r
     */\r
    getToolElement: Ext.emptyFn,\r
\r
    /**\r
     * @method\r
     * Append a new child item to the DOM.\r
     * @param {Ext.list.AbstractTreeItem} item The item to insert.\r
     * @param {Ext.list.AbstractTreeItem} refItem The item the node is to\r
     * be inserted before. `null` if the item is to be added to the end.\r
     *\r
     * @protected\r
     * @template\r
     */\r
    insertItem: Ext.emptyFn,\r
\r
    /**\r
     * Check if the current item is expanded.\r
     * @return {Boolean} `true` if this item is expanded.\r
     */\r
    isExpanded: function () {\r
        return this.getExpanded();\r
    },\r
\r
    /**\r
     * @method\r
     * Checks whether the event is an event that should select this node.\r
     * @param {Ext.event.Event} e The event object.\r
     * @return {Boolean} `true` if the event should select this node.\r
     *\r
     * @protected\r
     * @template\r
     */\r
    isSelectionEvent: Ext.emptyFn,\r
\r
    /**\r
     * @method\r
     * Checks whether the event is an event that should toggle the expand/collapse state.\r
     * @param {Ext.event.Event} e The event object.\r
     * @return {Boolean} `true` if the event should toggle the expand/collapsed state.\r
     * \r
     * @protected\r
     * @template\r
     */\r
    isToggleEvent: Ext.emptyFn,\r
\r
    /**\r
     * Handle this node being collapsed.\r
     * @param {Ext.data.TreeModel} node  The node being collapsed.\r
     *\r
     * @protected\r
     */\r
    nodeCollapse: function (node, collapsingForExpand) {\r
        var me = this,\r
            owner = me.getOwner(),\r
            animation = me.preventAnimation ? null : owner.getAnimation();\r
\r
        me.nodeCollapseBegin(animation, collapsingForExpand);\r
\r
        if (!animation) {\r
            me.nodeCollapseEnd(collapsingForExpand);\r
        }\r
    },\r
\r
    nodeCollapseBegin: function (animation, collapsingForExpand) {\r
        var me = this,\r
            owner = me.getOwner();\r
\r
        me.setExpanded(false);\r
\r
        owner.fireEvent('itemcollapse', owner, me);\r
    },\r
\r
    nodeCollapseEnd: function (collapsingForExpand) {\r
        if (!collapsingForExpand) {\r
            this.getOwner().updateLayout();\r
        }\r
    },\r
\r
    /**\r
     * Handle this node being expanded.\r
     * @param {Ext.data.TreeModel} node  The node being expanded.\r
     *\r
     * @protected\r
     */\r
    nodeExpand: function (node) {\r
        var me = this,\r
            owner = me.getOwner(),\r
            floated = me.getFloated(),\r
            animation = !floated && owner.getAnimation();\r
\r
        me.nodeExpandBegin(animation);\r
\r
        if (!animation) {\r
            me.nodeExpandEnd();\r
        }\r
    },\r
\r
    nodeExpandBegin: function (animation) {\r
        var me = this,\r
            owner = me.getOwner();\r
\r
        me.setExpanded(true);\r
\r
        owner.fireEvent('itemexpand', owner, me);\r
    },\r
\r
    nodeExpandEnd: function () {\r
        this.getOwner().updateLayout();\r
    },\r
\r
    /**\r
     * Handle a node being inserted as a child of this item.\r
     * @param {Ext.data.TreeModel} node  The node being inserted.\r
     * @param {Ext.data.TreeModel} refNode The node that is to be inserted before. `null`\r
     * if this operation is an append.\r
     *\r
     * @protected\r
     */\r
    nodeInsert: function (node, refNode) {\r
        var me = this,\r
            owner = me.getOwner(),\r
            map = me.itemMap,\r
            id = node.internalId,\r
            item = owner.getItem(node),\r
            refItem = null,\r
            oldParent;\r
\r
        if (item) {\r
            oldParent = item.getParentItem();\r
            // May have some kind of custom removal processing, allow it to happen, even if it's us\r
            oldParent.removeItem(item);\r
            if (oldParent !== me) {\r
                oldParent.doUpdateExpandable();\r
                item.setParentItem(me);\r
            }\r
        } else {\r
            item = me.getOwner().createItem(node, me);\r
        }\r
        map[id] = item;\r
\r
        if (refNode) {\r
            refItem = map[refNode.internalId];\r
        }\r
\r
        me.insertItem(item, refItem);\r
        me.doUpdateExpandable();\r
\r
        owner.fireEvent('iteminsert', owner, me, item, refItem);\r
\r
        owner.updateLayout();\r
    },\r
\r
    /**\r
     * Handle a node being removed as a child of this item.\r
     * @param {Ext.data.TreeModel} node  The node being removed.\r
     *\r
     * @protected\r
     */\r
    nodeRemove: function (node) {\r
        var me = this,\r
            map = me.itemMap,\r
            owner = me.getOwner(),\r
            id = node.internalId,\r
            item = map[id];\r
\r
        if (item) {\r
            delete map[id];\r
            me.removeItem(item);\r
            item.destroy();\r
\r
            me.doUpdateExpandable();\r
\r
            owner.fireEvent('itemremove', owner, me, item);\r
\r
            owner.updateLayout();\r
        }\r
    },\r
\r
    /**\r
     * Handle this node having fields changed.\r
     * \r
     * @param {Ext.data.TreeModel} node The node.\r
     * @param {String[]} modifiedFieldNames The modified field names, if known.\r
     *\r
     * @protected\r
     */\r
    nodeUpdate: function (node, modifiedFieldNames) {\r
        this.doNodeUpdate(node);\r
    },\r
\r
    /**\r
     * @method\r
     *\r
     * Remove a child item from the DOM.\r
     * @param {Ext.list.AbstractTreeItem} item The item to remove.\r
     *\r
     * @protected\r
     * @template\r
     */\r
    removeItem: Ext.emptyFn,\r
\r
    updateFloated: function (floated) {\r
        var me = this,\r
            el = me.element,\r
            placeholder = me.placeholder,\r
            node, wasExpanded;\r
\r
        if (floated) {\r
            placeholder = el.clone(false, true); // shallow, asDom\r
            placeholder.id += '-placeholder'; // avoid duplicate id\r
            me.placeholder = Ext.get(placeholder);\r
\r
            me.wasExpanded = me.getExpanded();\r
            me.setExpanded(true);\r
\r
            el.dom.parentNode.insertBefore(placeholder, el.dom);\r
\r
            me.floater = me.createFloater(); // toolkit-specific\r
        } else if (placeholder) {\r
            wasExpanded = me.wasExpanded;\r
            node = me.getNode();\r
            me.setExpanded(wasExpanded);\r
            if (!wasExpanded && node.isExpanded()) {\r
                // If we have been floating and expanded a child, we may have been\r
                // expanded as part of the ancestors. Attempt to restore state.\r
                me.preventAnimation = true;\r
                node.collapse();\r
                me.preventAnimation = false;\r
            }\r
            me.floater.remove(me, false); // don't destroy\r
            placeholder.dom.parentNode.insertBefore(el.dom, placeholder.dom);\r
\r
            placeholder.destroy();\r
            me.floater.destroy();\r
\r
            me.placeholder = me.floater = null;\r
\r
            me.floatedByHover = false;\r
        }\r
    },\r
\r
    /**\r
     * @inheritdoc\r
     */\r
    destroy: function () {\r
        var me = this,\r
            map = me.itemMap,\r
            owner = me.getOwner(),\r
            key;\r
\r
        if (map) {\r
            for (key in map) {\r
                map[key].destroy();\r
            }\r
            me.itemMap = null;\r
        }\r
\r
        if (owner) {\r
            owner.removeItem(me.getNode());\r
        }\r
\r
        me.setNode(null);\r
        me.setParentItem(null);\r
        me.setOwner(null);\r
\r
        me.callParent();\r
    },\r
\r
    privates: {\r
        /**\r
         * Update properties after a node update.\r
         *\r
         * @param {Ext.data.TreeModel} node The node.\r
         * @param {String[]} modifiedFieldNames The modified field names, if known.\r
         *\r
         * @private\r
         */\r
        doNodeUpdate: function (node) {\r
            var me = this,\r
                textProperty = this.getTextProperty(),\r
                iconClsProperty = this.getIconClsProperty();\r
\r
            if (textProperty) {\r
                me.setText(node.data[textProperty]);\r
            }\r
\r
            if (iconClsProperty) {\r
                me.setIconCls(node.data[iconClsProperty]);\r
            }\r
\r
            me.setLoading(node.isLoading());\r
            me.setLeaf(node.isLeaf());\r
            me.doUpdateExpandable();\r
        },\r
\r
        doUpdateExpandable: function () {\r
            var node = this.getNode();\r
            this.setExpandable(node.isExpandable());\r
        },\r
\r
        /**\r
         * Handle a click on this item.\r
         * @param {Ext.event.Event} e The event\r
         *\r
         * @private\r
         */\r
        onClick: function (e) {\r
            var me = this,\r
                owner = me.getOwner(),\r
                node = me.getNode(),\r
                info = {\r
                    event: e,\r
                    item: me,\r
                    node: node,\r
                    tree: owner,\r
                    select: node.get('selectable') !== false && me.isSelectionEvent(e),\r
                    toggle: me.isToggleEvent(e)\r
                };\r
\r
            /**\r
             * @event itemclick\r
             *\r
             * @param {Ext.list.Tree} sender The `treelist` that fired this event.\r
             *\r
             * @param {Object} info\r
             * @param {Ext.event.Event} info.event The DOM event that precipitated this\r
             * event.\r
             * @param {Ext.list.AbstractTreeItem} info.item The tree node that was clicked.\r
             * @param {Ext.list.Tree} info.tree The `treelist` that fired this event.\r
             * @param {Boolean} info.select On input this is value is the result of the\r
             *   {@link #isSelectionEvent} method. On return from event handlers (assuming a\r
             *   `false` return does not cancel things) this property is used to determine\r
             *   if the clicked node should be selected.\r
             * @param {Boolean} info.toggle On input this is value is the result of the\r
             *   {@link #isToggleEvent} method. On return from event handlers (assuming a\r
             *   `false` return does not cancel things) this property is used to determine\r
             *   if the clicked node's expand/collapse state should be toggled.\r
             *\r
             * @since 6.0.1\r
             */\r
            if (owner.fireEvent('itemclick', owner, info) !== false) {\r
                if (info.toggle) {\r
                    me.toggleExpanded();\r
                }\r
\r
                if (info.select) {\r
                    owner.setSelection(me.getNode());\r
                }\r
            }\r
        },\r
\r
        toggleExpanded: function() {\r
            if (this.isExpanded()) {\r
                this.collapse();\r
            } else {\r
                this.expand();\r
            }\r
        },\r
\r
        updateIndent: function (value) {\r
            var items = this.itemMap,\r
                id;\r
\r
            for (id in items) {\r
                items[id].setIndent(value);\r
            }\r
        }\r
    }\r
});\r