add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / grid / CellEditor.js

/**\r
 * Internal utility class that provides default configuration for cell editing.\r
 * @private\r
 */\r
Ext.define('Ext.grid.CellEditor', {\r
    extend: 'Ext.Editor',\r
\r
    /**\r
     * @property {Boolean} isCellEditor\r
     * @readonly\r
     * `true` in this class to identify an object as an instantiated CellEditor, or subclass thereof.\r
     */\r
    isCellEditor: true,\r
    \r
    alignment: 'l-l!',\r
\r
    hideEl : false,\r
\r
    cls: Ext.baseCSSPrefix + 'small-editor ' +\r
        Ext.baseCSSPrefix + 'grid-editor ' +\r
        Ext.baseCSSPrefix + 'grid-cell-editor',\r
\r
    treeNodeSelector: '.' + Ext.baseCSSPrefix + 'tree-node-text',\r
\r
    shim: false,\r
\r
    shadow: false,\r
\r
    // Set the grid that owns this editor.\r
    // Called by CellEditing#getEditor\r
    setGrid: function(grid) {\r
        var me = this,\r
            oldGrid = me.grid,\r
            viewListeners;\r
\r
        if (grid !== oldGrid) {\r
            viewListeners = {\r
                beforeitemupdate: me.beforeItemUpdate,\r
                itemupdate: me.onItemUpdate,\r
                scope: me\r
            };\r
            // Remove previous refresh listener\r
            if (oldGrid) {\r
                oldGrid.getView().un(viewListeners);\r
            }\r
\r
            me.grid = grid;\r
\r
            // On view refresh, we need to copy our DOM into the detached body to prevent it from being garbage collected.\r
            grid.getView().on(viewListeners);\r
        }\r
    },\r
\r
    beforeViewRefresh: function(view) {\r
        var me = this,\r
            dom = me.el && me.el.dom;\r
\r
        if (dom) {\r
            me.wasAllowBlur = me.allowBlur;\r
            if (me.editing) {\r
\r
                // Clear the Panel's cellFocused flag prior to removing it from the DOM\r
                // This will prevent the Panels onFocusLeave from processing the resulting blurring.\r
                view.cellFocused = false;\r
\r
                // Set the Editor.allowBlur setting so that it does not process the upcoming field blur event and terminate the edit\r
                me.allowBlur = false;\r
            }\r
\r
            // Remove the editor from the view to protect it from annihilation: https://sencha.jira.com/browse/EXTJSIV-11713\r
            if (dom.parentNode) {\r
                // Set refreshing flag so that onFocusLeave caused by removing a focused element\r
                // does not exit actionableMode\r
                view.refreshing = true;\r
                dom.parentNode.removeChild(dom);\r
            }\r
        }\r
    },\r
\r
    onViewRefresh: function(view) {\r
        var me = this,\r
            dom = me.el && me.el.dom,\r
            cell,\r
            context = me.context;\r
\r
        if (dom) {\r
            // Update the context with the possibly new contextual data\r
            // (refresh might have been caused by a sort or column move etc)\r
            cell = view.getCellByPosition(context, true);\r
\r
            // If the refresh was caused by eg column removal, the cell will not exist.\r
            // In this case, terminate the edit.\r
            if (!cell) {\r
                me.allowBlur = me.wasAllowBlur;\r
                me.completeEdit();\r
                Ext.getDetachedBody().dom.appendChild(dom);\r
                return;\r
            }\r
\r
            context.node = view.getNode(context.record);\r
            context.row = view.getRow(context.record);\r
            context.cell = cell;\r
            context.rowIdx = view.indexOf(context.row);\r
            cell.insertBefore(dom, cell.firstChild);\r
            me.boundEl = me.container = Ext.get(cell);\r
            me.realign(true);\r
\r
            // If the view was refreshed while we were editing, replace it.\r
            // On IE, the blur event will fire asynchronously, so we must leave\r
            // allowBlur as false for a very short while longer.\r
            // After which we reset it, and refocus the field.\r
            if (me.editing) {\r
                if (Ext.isIE) {\r
                    Ext.defer(function() {\r
                        // May have been destroyed immediately after refreshing!?\r
                        if (!me.destroyed) {\r
                            me.allowBlur = me.wasAllowBlur;\r
                            me.field.focus();\r
                        }\r
                    }, 10);\r
                } else {\r
                    me.allowBlur = me.wasAllowBlur;\r
                    me.field.focus();\r
                }\r
            }\r
        }\r
    },\r
\r
    beforeItemUpdate: function(record, recordIndex, oldItemDom, columnsToUpdate) {\r
        var me = this,\r
            context = me.context,\r
            l = columnsToUpdate.length,\r
            i;\r
\r
        // If this CellEditor's row is to be updated, we *may* have to restore this editor\r
        // due to cell content possibly being changed.\r
        if (record === context.record) {\r
            for (i = 0; i < l; i++) {\r
\r
                // If the cell is scheduled for update, we definitely will need restoration.\r
                if (columnsToUpdate[i] === context.column) {\r
                    me.needsFixOnItemUpdate = true;\r
                    me.beforeViewRefresh(context.view);\r
                    return;\r
                }\r
            }\r
        }\r
    },\r
\r
    onItemUpdate: function(record, recordIndex, oldItemDom) {\r
        var view = this.context.view;\r
\r
        if (this.needsFixOnItemUpdate) {\r
\r
            // The refreshing flag was set to indicate to the onFocusLeave listener that it\r
            // should ignore focusleave caused by this Editor blurring.\r
            this.needsFixOnItemUpdate = view.refreshing = false;\r
            this.onViewRefresh(view);\r
        }\r
    },\r
\r
    startEdit: function(boundEl, value, doFocus) {\r
        this.context = this.editingPlugin.context;\r
        this.callParent([boundEl, value, doFocus]);\r
    },\r
\r
    /**\r
     * @private\r
     * Shows the editor, end ensures that it is rendered into the correct view\r
     * Hides the grid cell inner element when a cell editor is shown.\r
     */\r
    onShow: function() {\r
        var me = this,\r
            innerCell = me.boundEl.down(me.context.view.innerSelector);\r
\r
        if (innerCell) {\r
            if (me.isForTree) {\r
                innerCell = innerCell.child(me.treeNodeSelector);\r
            }\r
            innerCell.hide();\r
        }\r
\r
        me.callParent(arguments);\r
    },\r
\r
    onFocusEnter: function() {\r
        var context = this.context,\r
            view = context.view;\r
        \r
        // Focus restoration after a refresh may require realignment and correction\r
        // of the context because it could have been due to a or filter operation and\r
        // the context may have changed position.\r
        context.node = view.getNode(context.record);\r
        context.row = view.getRow(context.record);\r
        context.cell = context.getCell(true);\r
        context.rowIdx = view.indexOf(context.row);\r
        this.realign(true);\r
\r
        this.callParent(arguments);\r
\r
        // Ensure that hide processing does not throw focus back to the previously focused element.\r
        this.focusEnterEvent = null;\r
    },\r
\r
    onEditComplete: function(remainVisible) {\r
        // When being asked to process edit completion, if we are not hiding, restore the cell now\r
        if (remainVisible) {\r
            this.restoreCell();\r
        }\r
        this.callParent(arguments);\r
    },\r
\r
    /**\r
     * @private\r
     * Shows the grid cell inner element when a cell editor is hidden\r
     */\r
    onHide: function() {\r
        this.restoreCell();\r
        this.callParent(arguments);\r
    },\r
\r
    onSpecialKey: function(field, event) {\r
        var me = this,\r
            key = event.getKey(),\r
            complete = me.completeOnEnter && key === event.ENTER,\r
            cancel = me.cancelOnEsc && key === event.ESC,\r
            view = me.editingPlugin.view;\r
\r
        if (complete || cancel) {\r
            // Do not let the key event bubble into the NavigationModel after we're don processing it.\r
            // We control the navigation action here; we focus the cell.\r
            event.stopEvent();\r
\r
            // Maintain visibility so that focus doesn't leak.\r
            // We need to direct focusback to the owning cell.\r
            if (complete) {\r
                me.completeEdit(true);\r
            } else if (cancel) {\r
                me.cancelEdit(true);\r
            }\r
\r
            view.getNavigationModel().setPosition(me.context, null, event);\r
            view.ownerGrid.setActionableMode(false);\r
        }\r
    },\r
\r
    getRefOwner: function() {\r
        return this.column && this.column.getView();\r
    },\r
\r
    restoreCell: function() {\r
        var me = this,\r
            innerCell = me.boundEl.down(me.context.view.innerSelector);\r
\r
        if (innerCell) {\r
            if (me.isForTree) {\r
                innerCell = innerCell.child(me.treeNodeSelector);\r
            }\r
            innerCell.show();\r
        }        \r
    },\r
\r
    /**\r
     * @private\r
     * Fix checkbox blur when it is clicked.\r
     */\r
    afterRender: function() {\r
        var me = this,\r
            field = me.field;\r
\r
        me.callParent(arguments);\r
\r
        if (field.isCheckbox) {\r
            field.mon(field.inputEl, {\r
                mousedown: me.onCheckBoxMouseDown,\r
                click: me.onCheckBoxClick,\r
                scope: me\r
            });\r
        }\r
    },\r
    \r
    /**\r
     * @private\r
     * Because when checkbox is clicked it loses focus  completeEdit is bypassed.\r
     */\r
    onCheckBoxMouseDown: function() {\r
        this.completeEdit = Ext.emptyFn;\r
    },\r
     \r
    /**\r
     * @private\r
     * Restore checkbox focus and completeEdit method.\r
     */\r
    onCheckBoxClick: function() {\r
        delete this.completeEdit;\r
        this.field.focus(false, 10);\r
    },\r
    \r
    /**\r
     * @private\r
     * Realigns the Editor to the grid cell, or to the text node in the grid inner cell\r
     * if the inner cell contains multiple child nodes.\r
     */\r
    realign: function(autoSize) {\r
        var me = this,\r
            boundEl = me.boundEl,\r
            innerCell = boundEl.down(me.context.view.innerSelector),\r
            innerCellTextNode = innerCell.dom.firstChild,\r
            width = boundEl.getWidth(),\r
            offsets = Ext.Array.clone(me.offsets),\r
            grid = me.grid,\r
            xOffset,\r
            v = '',\r
\r
            // innerCell is empty if there are no children, or there is one text node, and it contains whitespace\r
            isEmpty = !innerCellTextNode || (innerCellTextNode.nodeType === 3 && !(Ext.String.trim(v = innerCellTextNode.data).length));\r
\r
        if (me.isForTree) {\r
            // When editing a tree, adjust the width and offsets of the editor to line\r
            // up with the tree cell's text element\r
            xOffset = me.getTreeNodeOffset(innerCell);\r
            width -= Math.abs(xOffset);\r
            offsets[0] += xOffset;\r
        }\r
\r
        if (grid.columnLines) {\r
            // Subtract the column border width so that the editor displays inside the\r
            // borders. The column border could be either on the left or the right depending\r
            // on whether the grid is RTL - using the sum of both borders works in both modes.\r
            width -= boundEl.getBorderWidth('rl');\r
        }\r
\r
        if (autoSize === true) {\r
            me.field.setWidth(width);\r
        }\r
\r
        // https://sencha.jira.com/browse/EXTJSIV-10871 Ensure the data bearing element has a height from text.\r
        if (isEmpty) {\r
            innerCell.dom.innerHTML = 'X';\r
        }\r
\r
        me.alignTo(boundEl, me.alignment, offsets);\r
\r
        if (isEmpty) {\r
            innerCell.dom.firstChild.data = v;\r
        }\r
    },\r
\r
    getTreeNodeOffset: function(innerCell) {\r
        return innerCell.child(this.treeNodeSelector).getOffsetsTo(innerCell)[0];\r
    }\r
});\r