add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / grid / plugin / RowEditing.js

/**\r
 * The Ext.grid.plugin.RowEditing plugin injects editing at a row level for a Grid. When editing begins,\r
 * a small floating dialog will be shown for the appropriate row. Each editable column will show a field\r
 * for editing. There is a button to save or cancel all changes for the edit.\r
 *\r
 * The field that will be used for the editor is defined at the\r
 * {@link Ext.grid.column.Column#editor editor}. The editor can be a field instance or a field configuration.\r
 * If an editor is not specified for a particular column then that column won't be editable and the value of\r
 * the column will be displayed. To provide a custom renderer for non-editable values, use the \r
 * {@link Ext.grid.column.Column#editRenderer editRenderer} configuration on the column.\r
 *\r
 * The editor may be shared for each column in the grid, or a different one may be specified for each column.\r
 * An appropriate field type should be chosen to match the data structure that it will be editing. For example,\r
 * to edit a date, it would be useful to specify {@link Ext.form.field.Date} as the editor.\r
 *\r
 *     @example\r
 *     Ext.create('Ext.data.Store', {\r
 *         storeId: 'simpsonsStore',\r
 *         fields:[ 'name', 'email', 'phone'],\r
 *         data: [\r
 *             { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },\r
 *             { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },\r
 *             { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },\r
 *             { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }\r
 *         ]\r
 *     });\r
 *\r
 *     Ext.create('Ext.grid.Panel', {\r
 *         title: 'Simpsons',\r
 *         store: Ext.data.StoreManager.lookup('simpsonsStore'),\r
 *         columns: [\r
 *             {header: 'Name', dataIndex: 'name', editor: 'textfield'},\r
 *             {header: 'Email', dataIndex: 'email', flex:1,\r
 *                 editor: {\r
 *                     xtype: 'textfield',\r
 *                     allowBlank: false\r
 *                 }\r
 *             },\r
 *             {header: 'Phone', dataIndex: 'phone'}\r
 *         ],\r
 *         selModel: 'rowmodel',\r
 *         plugins: {\r
 *             ptype: 'rowediting',\r
 *             clicksToEdit: 1\r
 *         },\r
 *         height: 200,\r
 *         width: 400,\r
 *         renderTo: Ext.getBody()\r
 *     });\r
 *\r
 */\r
Ext.define('Ext.grid.plugin.RowEditing', {\r
    extend: 'Ext.grid.plugin.Editing',\r
    alias: 'plugin.rowediting',\r
\r
    requires: [\r
        'Ext.grid.RowEditor'\r
    ],\r
\r
    lockableScope: 'top',\r
\r
    editStyle: 'row',\r
\r
    /**\r
     * @cfg {Boolean} autoCancel\r
     * `true` to automatically cancel any pending changes when the row editor begins editing a new row.\r
     * `false` to force the user to explicitly cancel the pending changes.\r
     */\r
    autoCancel: true,\r
\r
    /**\r
     * @cfg {Number} clicksToMoveEditor\r
     * The number of clicks to move the row editor to a new row while it is visible and actively editing another row.\r
     * This will default to the same value as {@link Ext.grid.plugin.Editing#clicksToEdit clicksToEdit}.\r
     */\r
\r
    /**\r
     * @cfg {Boolean} errorSummary\r
     * True to show a {@link Ext.tip.ToolTip tooltip} that summarizes all validation errors present\r
     * in the row editor. Set to false to prevent the tooltip from showing.\r
     */\r
    errorSummary: true,\r
\r
    constructor: function() {\r
        var me = this;\r
\r
        me.callParent(arguments);\r
\r
        if (!me.clicksToMoveEditor) {\r
            me.clicksToMoveEditor = me.clicksToEdit;\r
        }\r
\r
        me.autoCancel = !!me.autoCancel;\r
    },\r
\r
    init: function(grid) {\r
        this.callParent([grid]);\r
\r
        // This plugin has an interest in processing a request for actionable mode.\r
        // It does not actually enter actionable mode, it just calls startEdit\r
        if (grid.lockedGrid) {\r
            grid.lockedGrid.registerActionable(this);\r
            grid.normalGrid.registerActionable(this);\r
        } else {\r
            grid.registerActionable(this);\r
        }\r
    },\r
\r
    destroy: function() {\r
        Ext.destroy(this.editor);\r
        this.callParent();\r
    },\r
    \r
    onBeforeReconfigure: function() {\r
        this.callParent(arguments);\r
        this.cancelEdit();\r
    },\r
    \r
    onReconfigure: function(grid, store, columns) {\r
        var ed = this.editor;\r
        this.callParent(arguments);\r
        // Only need to adjust column widths if we have new columns \r
        if (columns && ed && ed.rendered) {\r
            ed.needsSyncFieldWidths = true;\r
        }\r
    },\r
\r
    shouldStartEdit: function(editor) {\r
        return true;\r
    },\r
\r
    /**\r
     * Starts editing the specified record, using the specified Column definition to define which field is being edited.\r
     * @param {Ext.data.Model} record The Store data record which backs the row to be edited.\r
     * @param {Ext.grid.column.Column/Number} [columnHeader] The Column object defining the column field to be focused, or index of the column.\r
     * If not specified, it will default to the first visible column.\r
     * @return {Boolean} `true` if editing was started, `false` otherwise.\r
     */\r
    startEdit: function(record, columnHeader) {\r
        var me = this,\r
            editor = me.getEditor(),\r
            context;\r
            \r
        if (Ext.isEmpty(columnHeader)) {\r
            columnHeader = me.grid.getTopLevelVisibleColumnManager().getHeaderAtIndex(0);\r
        }\r
\r
        if (editor.beforeEdit() !== false) {\r
            context = me.getEditingContext(record, columnHeader);\r
            if (context && me.beforeEdit(context) !== false && me.fireEvent('beforeedit', me, context) !== false && !context.cancel) {\r
                me.context = context;\r
\r
                // If editing one side of a lockable grid, cancel any edit on the other side.\r
                if (me.lockingPartner) {\r
                    me.lockingPartner.cancelEdit();\r
                }\r
                editor.startEdit(context.record, context.column, context);\r
                me.editing = true;\r
                return true;\r
            }\r
        }\r
        return false;\r
    },\r
\r
    /**\r
     * This method is called when actionable mode is requested for a cell. \r
     * @param {Ext.grid.CellContext} position The position at which actionable mode was requested.\r
     * @return {Boolean} `false` Actionable mode is *not* entered for RowEditing.\r
     * @protected\r
     */\r
    activateCell: function(pos) {\r
        // Only activate editing if there are no readily activatable elements in the activate position.\r
        // We defer to those focusables. Editing may be started on other columns.\r
        if (!pos.getCell().query('[tabIndex="-1"]').length) {\r
            this.startEdit(pos.record, pos.column);\r
            return true ;\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * The {@link Ext.grid.RowEditor RowEditor} hooks up a KeyNav to call this method to complete the edit.\r
     */\r
    onEnterKey: function(e) {\r
        var me = this,\r
            targetComponent;\r
\r
        // KeyMap entry for EnterKey added after the entry that sets actionable mode, so this will get called\r
        // after that handler. We must ignore ENTER key in actionable mode.\r
        if (!me.grid.ownerGrid.actionableMode && me.editing) {\r
            targetComponent = Ext.getCmp(e.getTarget().getAttribute('componentId'));\r
\r
            // ENTER when a picker is expanded does not complete the edit\r
            if (!(targetComponent && targetComponent.isPickerField && targetComponent.isExpanded)) {\r
                me.completeEdit();\r
            }\r
        }\r
    },\r
\r
    cancelEdit: function() {\r
        var me = this;\r
\r
        if (me.editing) {\r
            me.getContextFieldValues();\r
            me.getEditor().cancelEdit();\r
            me.callParent(arguments);\r
            return;\r
        }\r
        // If we aren't editing, return true to allow the event to bubble\r
        return true;\r
    },\r
\r
    completeEdit: function() {\r
        var me = this,\r
            context = me.context;\r
\r
        if (me.editing && me.validateEdit(context)) {\r
            me.editing = false;\r
            me.fireEvent('edit', me, context);\r
        }\r
    },\r
\r
    validateEdit: function() {\r
        this.getContextFieldValues();\r
        return this.callParent(arguments) && this.getEditor().completeEdit();\r
    },\r
\r
    getEditor: function() {\r
        var me = this;\r
\r
        if (!me.editor) {\r
            me.editor = me.initEditor();\r
        }\r
        return me.editor;\r
    },\r
\r
    getContextFieldValues: function () {\r
        var editor         = this.editor,\r
            context        = this.context,\r
            record         = context.record,\r
            newValues      = {},\r
            originalValues = {},\r
            editors        = editor.query('>[isFormField]'),\r
            len            = editors.length,\r
            i, name, item;\r
\r
        for (i = 0; i < len; i++) {\r
            item = editors[i];\r
            name = item.dataIndex;\r
\r
            newValues[name]      = item.getValue();\r
            originalValues[name] = record.get(name);\r
        }\r
\r
        Ext.apply(context, {\r
            newValues      : newValues,\r
            originalValues : originalValues\r
        });\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    initEditor: function() {\r
        return new Ext.grid.RowEditor(this.initEditorConfig());\r
    },\r
    \r
    initEditorConfig: function(){\r
        var me       = this,\r
            grid     = me.grid,\r
            view     = me.view,\r
            headerCt = grid.headerCt,\r
            btns     = ['saveBtnText', 'cancelBtnText', 'errorsText', 'dirtyText'],\r
            b,\r
            bLen     = btns.length,\r
            cfg      = {\r
                autoCancel: me.autoCancel,\r
                errorSummary: me.errorSummary,\r
                fields: headerCt.getGridColumns(),\r
                hidden: true,\r
                view: view,\r
                // keep a reference..\r
                editingPlugin: me\r
            },\r
            item;\r
\r
        for (b = 0; b < bLen; b++) {\r
            item = btns[b];\r
\r
            if (Ext.isDefined(me[item])) {\r
                cfg[item] = me[item];\r
            }\r
        }\r
        return cfg;    \r
    },\r
\r
    /**\r
     * @private\r
     */\r
    initEditTriggers: function() {\r
        var me = this,\r
            view = me.view,\r
            moveEditorEvent = me.clicksToMoveEditor === 1 ? 'click' : 'dblclick';\r
\r
        me.callParent(arguments);\r
\r
        if (me.clicksToMoveEditor !== me.clicksToEdit) {\r
            me.mon(view, 'cell' + moveEditorEvent, me.moveEditorByClick, me);\r
        }\r
\r
        view.on({\r
            render: function() {\r
                me.mon(me.grid.headerCt, {\r
                    scope: me,\r
                    columnresize: me.onColumnResize,\r
                    columnhide: me.onColumnHide,\r
                    columnshow: me.onColumnShow\r
                });\r
            },\r
            single: true\r
        });\r
    },\r
\r
    moveEditorByClick: function() {\r
        var me = this;\r
        if (me.editing) {\r
            me.superclass.onCellClick.apply(me, arguments);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onColumnAdd: function(ct, column) {\r
        if (column.isHeader) {\r
            var me = this,\r
                editor;\r
\r
            me.initFieldAccessors(column);\r
\r
            // Only inform the editor about a new column if the editor has already been instantiated,\r
            // so do not use getEditor which instantiates the editor if not present.\r
            editor = me.editor;\r
            if (editor) {\r
                editor.onColumnAdd(column);\r
            }\r
        }\r
    },\r
\r
    // Ensure editors are cleaned up.\r
    beforeGridHeaderDestroy: function(headerCt) {\r
        var columns = this.grid.getColumnManager().getColumns(),\r
            len = columns.length,\r
            i,\r
            column,\r
            field;\r
\r
        for (i = 0; i < len; i++) {\r
            column = columns[i];\r
\r
            // If it has a field accessor, then destroy any field, and remove the accessors.\r
            if (column.hasEditor) {\r
                if (column.hasEditor() && (field = column.getEditor())) {\r
                    field.destroy();\r
                }\r
                this.removeFieldAccessors(column);\r
            }\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onColumnResize: function(ct, column, width) {\r
        if (column.isHeader) {\r
            var me = this,\r
                editor = me.getEditor();\r
\r
            if (editor) {\r
                editor.onColumnResize(column, width);\r
            }\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onColumnHide: function(ct, column) {\r
        // no isHeader check here since its already a columnhide event.\r
        var me = this,\r
            editor = me.getEditor();\r
\r
        if (editor) {\r
            editor.onColumnHide(column);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onColumnShow: function(ct, column) {\r
        // no isHeader check here since its already a columnshow event.\r
        var me = this,\r
            editor = me.getEditor();\r
\r
        if (editor) {\r
            editor.onColumnShow(column);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onColumnMove: function(ct, column, fromIdx, toIdx) {\r
        // no isHeader check here since its already a columnmove event.\r
        var me = this,\r
            editor = me.getEditor();\r
\r
        // Inject field accessors on move because if the move FROM the main headerCt and INTO a grouped header,\r
        // the accessors will have been deleted but not added. They are added conditionally.\r
        me.initFieldAccessors(column);\r
\r
        if (editor) {\r
            // Must adjust the toIdx to account for removal if moving rightwards\r
            // because RowEditor.onColumnMove just calls Container.move which does not do this.\r
            editor.onColumnMove(column, fromIdx, toIdx);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    setColumnField: function(column, field) {\r
        var me = this,\r
            editor = me.getEditor();\r
\r
        if (editor) {\r
            // Remove the old editor and destroy it.\r
            editor.destroyColumnEditor(column);\r
        }\r
\r
        me.callParent(arguments);\r
\r
        if (editor) {\r
            editor.insertColumnEditor(column);\r
        }\r
    },\r
\r
    createColumnField: function(column, defaultField) {\r
        var editor = this.editor,\r
            def;\r
\r
        if (editor) {\r
            def = editor.getDefaultFieldCfg();\r
        }\r
\r
        return this.callParent([column, defaultField || def]);\r
    }\r
});\r