add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / selection / CellModel.js

/**\r
 * A selection model for {@link Ext.grid.Panel grid panels} which allows selection of a single cell at a time.\r
 *\r
 * Implements cell based navigation via keyboard.\r
 *\r
 *     @example\r
 *     var store = Ext.create('Ext.data.Store', {\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: store,\r
 *         width: 400,\r
 *         renderTo: Ext.getBody(),\r
 *         columns: [\r
 *             { text: 'Name',  dataIndex: 'name' },\r
 *             { text: 'Email', dataIndex: 'email', flex: 1 },\r
 *             { text: 'Phone', dataIndex: 'phone' }\r
 *         ],\r
 *         selModel: 'cellmodel'\r
 *     });\r
 */\r
Ext.define('Ext.selection.CellModel', {\r
    extend: 'Ext.selection.DataViewModel',\r
    alias: 'selection.cellmodel',\r
    requires: [\r
        'Ext.grid.CellContext'\r
    ],\r
\r
    /**\r
     * @cfg {"SINGLE"} mode\r
     * Mode of selection.  Valid values are:\r
     *\r
     * - **"SINGLE"** - Only allows selecting one item at a time. This is the default.\r
     */\r
\r
\r
    isCellModel: true,\r
\r
    /**\r
     * @inheritdoc\r
     */\r
    deselectOnContainerClick: false,\r
\r
    /**\r
     * @cfg {Boolean} enableKeyNav\r
     * Turns on/off keyboard navigation within the grid.\r
     */\r
    enableKeyNav: true,\r
\r
    /**\r
     * @cfg {Boolean} preventWrap\r
     * Set this configuration to true to prevent wrapping around of selection as\r
     * a user navigates to the first or last column.\r
     */\r
    preventWrap: false,\r
\r
    /**\r
     * @event deselect\r
     * Fired after a cell is deselected\r
     * @param {Ext.selection.CellModel} this\r
     * @param {Ext.data.Model} record The record of the deselected cell\r
     * @param {Number} row The row index deselected\r
     * @param {Number} column The column index deselected\r
     */\r
\r
    /**\r
     * @event select\r
     * Fired after a cell is selected\r
     * @param {Ext.selection.CellModel} this\r
     * @param {Ext.data.Model} record The record of the selected cell\r
     * @param {Number} row The row index selected\r
     * @param {Number} column The column index selected\r
     */\r
\r
    bindComponent: function(view) {\r
        var me = this,\r
            grid;\r
\r
        // Unbind from a view\r
        if (me.view && me.gridListeners) {\r
            me.gridListeners.destroy();\r
        }\r
\r
        // DataViewModel's bindComponent\r
        me.callParent([view]);\r
\r
        if (view) {\r
            // view.grid is present during View construction, before the view has been\r
            // added as a child of the Panel, and an upward link it still needed.\r
            grid = view.grid || view.ownerCt;\r
\r
            if (grid.optimizedColumnMove !== false) {\r
                me.gridListeners = grid.on({\r
                    columnmove: me.onColumnMove,\r
                    scope: me,\r
                    destroyable: true\r
                });\r
            }\r
        }\r
    },\r
\r
    getViewListeners: function() {\r
        var result = this.callParent();\r
        result.refresh = this.onViewRefresh;\r
        return result;\r
    },\r
\r
    getHeaderCt: function() {\r
        var selection = this.navigationModel.getPosition(),\r
            view = selection ? selection.view : this.primaryView;\r
\r
        return view.headerCt;\r
    },\r
\r
    // Selection blindly follows focus. For now.\r
    onNavigate: function(e) {\r
        // It was a navigate out event.\r
        // Or stopSelection was stamped into the event by an upstream handler.\r
        // This is used by ActionColumn and CheckColumn to implement their stopSelection config\r
        if (!e.record || e.keyEvent.stopSelection) {\r
            return;\r
        }\r
\r
        this.setPosition(e.position);\r
    },\r
\r
    selectWithEvent: function(record, e) {\r
        this.select(record);\r
    },\r
    /** \r
     * Selects a cell by row / column.\r
     *\r
     *     var grid = Ext.create('Ext.grid.Panel', {\r
     *         title: 'Simpsons',\r
     *         store: {\r
     *             fields: ['name', 'email', 'phone'],\r
     *             data: [{\r
     *                 name: "Lisa",\r
     *                 email: "lisa@simpsons.com",\r
     *                 phone: "555-111-1224"\r
     *             }]\r
     *         },\r
     *         columns: [{\r
     *             text: 'Name',\r
     *             dataIndex: 'name'\r
     *         }, {\r
     *             text: 'Email',\r
     *             dataIndex: 'email',\r
     *             hidden: true\r
     *         }, {\r
     *             text: 'Phone',\r
     *             dataIndex: 'phone',\r
     *             flex: 1\r
     *         }],\r
     *         height: 200,\r
     *         width: 400,\r
     *         renderTo: Ext.getBody(),\r
     *         selType: 'cellmodel',\r
     *         tbar: [{\r
     *             text: 'Select position Object',\r
     *             handler: function() {\r
     *                 grid.getSelectionModel().select({\r
     *                     row: grid.getStore().getAt(0),\r
     *                     column: grid.down('gridcolumn[dataIndex=name]')\r
     *                 });\r
     *             }\r
     *         }, {\r
     *             text: 'Select position by Number',\r
     *             handler: function() {\r
     *                 grid.getSelectionModel().select({\r
     *                     row: 0,\r
     *                     column: 1\r
     *                 });\r
     *             }\r
     *         }]\r
     *     });\r
     *\r
     * @param {Object} pos An object with row and column properties\r
     * @param {Ext.data.Model/Number} pos.row\r
     *   A record or index of the record (starting at 0)\r
     * @param {Ext.grid.column.Column/Number} pos.column\r
     *   A column or index of the column (starting at 0).  Includes visible columns only.\r
     */\r
    select: function(pos, /* private */ keepExisting, suppressEvent) {\r
        var me = this,\r
            row,\r
            oldPos = me.getPosition(),\r
            store = me.view.store;\r
\r
        if (pos || pos === 0) {\r
            if (pos.isModel) {\r
                row = store.indexOf(pos);\r
                if (row !== -1) {\r
                    pos = {\r
                        row: row,\r
                        column: oldPos ? oldPos.column : 0\r
                    };\r
                } else {\r
                    pos = null;\r
                } \r
            } else if (typeof pos === 'number') {\r
                pos = {\r
                    row: pos,\r
                    column: 0\r
                };\r
            }\r
        } \r
\r
        if (pos) {\r
            me.selectByPosition(pos, suppressEvent);   \r
        } else {\r
            me.deselect();\r
        }\r
    },\r
\r
    /**\r
     * Returns the current position in the format {row: row, column: column}\r
     * @deprecated 5.0.1 This API uses column indices which include hidden columns in the count. Use {@link #getPosition} instead.\r
     */\r
    getCurrentPosition: function() {\r
        // If it's during a select, return nextSelection since we buffer\r
        // the real selection until after the event fires\r
        var position = this.selecting ? this.nextSelection : this.selection;\r
\r
        // This is the previous Format of the private CellContext class which was used here.\r
        // Do not return a CellContext so that if this object is passed into setCurrentPosition, it will be\r
        // read in the legacy (including hidden columns) way.\r
        return position ? {\r
            view: position.view,\r
            record: position.record,\r
            row: position.rowIdx,\r
            columnHeader: position.column,\r
            // IMPORTANT: The historic API for columns has been to include hidden columns\r
            // in the index. So we must report the index of the column in the "all" ColumnManager.\r
            column: position.view.getColumnManager().indexOf(position.column)\r
        } : position;\r
    },\r
\r
    /**\r
     * Returns the current position in the format {row: row, column: column}\r
     * @return {Ext.grid.CellContext} A CellContext object describing the current cell.\r
     */\r
    getPosition: function() {\r
        return (this.selecting ? this.nextSelection : this.selection) || null;\r
    },\r
\r
    /**\r
     * Sets the current position.\r
     * @deprecated 5.0.1 This API uses column indices which include hidden columns in the count. Use {@link #setPosition} instead.\r
     * @param {Ext.grid.CellContext/Object} position The position to set. May be an object of the form `{row:1, column:2}`\r
     * @param {Boolean} suppressEvent True to suppress selection events\r
     */\r
    setCurrentPosition: function(pos, suppressEvent, /* private */ preventCheck) {\r
        if (pos && !pos.isCellContext) {\r
            pos = new Ext.grid.CellContext(this.view).setPosition({\r
                row: pos.row,\r
                // IMPORTANT: The historic API for columns has been to include hidden columns\r
                // in the index. So we must index into the "all" ColumnManager.\r
                column: typeof pos.column === 'number' ? this.view.getColumnManager().getColumns()[pos.column] : pos.column\r
            });\r
        }\r
        return this.setPosition(pos, suppressEvent, preventCheck);\r
    },\r
\r
    /**\r
     * Sets the current position.\r
     *\r
     * Note that if passing a column index, it is the index within the *visible* column set.\r
     *\r
     * @param {Ext.grid.CellContext/Object} position The position to set. May be an object of the form `{row:1, column:2}`\r
     * @param {Boolean} suppressEvent True to suppress selection events\r
     */\r
    setPosition: function(pos, suppressEvent, /* private */ preventCheck) {\r
        var me = this,\r
            last = me.selection;\r
\r
        // Normalize it into an Ext.grid.CellContext if necessary\r
        if (pos) {\r
            pos = pos.isCellContext ? pos.clone() : new Ext.grid.CellContext(me.view).setPosition(pos);\r
        }\r
        if (!preventCheck && last) {\r
            // If the position is the same, jump out & don't fire the event\r
            if (pos && (pos.record === last.record && pos.column === last.column && pos.view === last.view)) {\r
                pos = null;\r
            } else {\r
                me.onCellDeselect(me.selection, suppressEvent);\r
            }\r
        }\r
\r
        if (pos) {\r
            me.nextSelection = pos;\r
            // set this flag here so we know to use nextSelection\r
            // if the node is updated during a select\r
            me.selecting = true;\r
            me.onCellSelect(me.nextSelection, suppressEvent);\r
            me.selecting = false;\r
            // Deselect triggered by new selection will kill the selection property, so restore it here.\r
            return (me.selection = pos);\r
        }\r
        // <debug>\r
        // Enforce code correctness in unbuilt source.\r
        return null;\r
        // </debug>\r
    },\r
\r
    isCellSelected: function(view, row, column) {\r
        var me = this,\r
            testPos,\r
            pos = me.getPosition();\r
\r
        if (pos && pos.view === view) {\r
            testPos = new Ext.grid.CellContext(view).setPosition({\r
                row: row,\r
                // IMPORTANT: The historic API for columns has been to include hidden columns\r
                // in the index. So we must index into the "all" ColumnManager.\r
                column: typeof column === 'number' ? view.getColumnManager().getColumns()[column] : column\r
            });\r
            return (testPos.record === pos.record) && (testPos.column === pos.column);\r
        }\r
    },\r
\r
    // Keep selection model in consistent state upon record deletion.\r
    onStoreRemove: function(store, records, indices) {\r
        var me = this,\r
            pos = me.getPosition();\r
\r
        me.callParent(arguments);\r
        if (pos && store.isMoving(pos.record)) {\r
            return;\r
        }\r
        \r
        if (pos && store.getCount() && store.indexOf(pos.record) !== -1) {\r
            pos.setRow(pos.record);\r
        } else {\r
            me.selection = null;\r
        }\r
    },\r
    \r
    onStoreClear: function() {\r
        this.callParent(arguments);\r
        this.selection = null;\r
    },\r
    \r
    onStoreAdd: function() {\r
        var me = this,\r
            pos = me.getPosition();\r
\r
        me.callParent(arguments);\r
        if (pos) {\r
            pos.setRow(pos.record);\r
        } else {\r
            me.selection = null;\r
        }\r
    },\r
\r
    /**\r
     * Set the current position based on where the user clicks.\r
     * @private\r
     * IMPORTANT* Due to V4.0.0 history, the cellIndex here is the index within ALL columns, including hidden.\r
     */\r
    onCellClick: function(view, cell, cellIndex, record, row, recordIndex, e) {\r
        // Record index will be -1 if the clicked record is a metadata record and not selectable\r
        if (recordIndex !== -1) {\r
            this.setPosition(e.position);\r
        }\r
    },\r
\r
    // notify the view that the cell has been selected to update the ui\r
    // appropriately and bring the cell into focus\r
    onCellSelect: function(position, supressEvent) {\r
        if (position && position.rowIdx !== undefined && position.rowIdx > -1) {\r
            this.doSelect(position.record, /*keepExisting*/false, supressEvent);\r
        }\r
    },\r
\r
    // notify view that the cell has been deselected to update the ui\r
    // appropriately\r
    onCellDeselect: function(position, supressEvent) {\r
        if (position && position.rowIdx !== undefined) {\r
            this.doDeselect(position.record, supressEvent);\r
        }\r
    },\r
\r
    onSelectChange: function(record, isSelected, suppressEvent, commitFn) {\r
        var me = this,\r
            pos, eventName, view;\r
\r
        if (isSelected) {\r
            pos = me.nextSelection;\r
            eventName = 'select';\r
        } else {\r
            pos = me.selection;\r
            eventName = 'deselect';\r
        }\r
\r
        // CellModel may be shared between two sides of a Lockable.\r
        // The position must include a reference to the view in which the selection is current.\r
        // Ensure we use the view specified by the position.\r
        view = pos.view || me.primaryView;\r
\r
        if ((suppressEvent || me.fireEvent('before' + eventName, me, record, pos.rowIdx, pos.colIdx)) !== false &&\r
                commitFn() !== false) {\r
\r
            if (isSelected) {\r
                view.onCellSelect(pos);\r
            } else {\r
                view.onCellDeselect(pos);\r
                delete me.selection;\r
            }\r
\r
            if (!suppressEvent) {\r
                me.fireEvent(eventName, me, record, pos.rowIdx, pos.colIdx);\r
            }\r
        }\r
    },\r
\r
    refresh: function() {\r
        var pos = this.getPosition(),\r
            selRowIdx;\r
\r
        // Synchronize the current position's row with the row of the last selected record.\r
        if (pos && (selRowIdx = this.store.indexOf(this.selected.last())) !== -1) {\r
            pos.rowIdx = selRowIdx;\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * When grid uses {@link Ext.panel.Table#optimizedColumnMove optimizedColumnMove} (the default), this is added as a\r
     * {@link Ext.panel.Table#columnmove columnmove} handler to correctly maintain the\r
     * selected column using the same column header.\r
     * \r
     * If optimizedColumnMove === false, (which some grid Features set) then the view is refreshed,\r
     * so this is not added as a handler because the selected column.\r
     */\r
    onColumnMove: function(headerCt, header, fromIdx, toIdx) {\r
        var grid = headerCt.up('tablepanel');\r
        if (grid) {\r
            this.onViewRefresh(grid.view);\r
        }\r
    },\r
    \r
    onUpdate: function(record) {\r
        var me = this,\r
            pos;\r
            \r
        if (me.isSelected(record)) {\r
            pos = me.selecting ? me.nextSelection : me.selection; \r
            me.view.onCellSelect(pos);\r
        }\r
    },\r
\r
    onViewRefresh: function(view) {\r
        var me = this,\r
            pos = me.getPosition(),\r
            newPos,\r
            headerCt = view.headerCt,\r
            record, column;\r
\r
        // Re-establish selection of the same cell coordinate.\r
        // DO NOT fire events because the selected \r
        if (pos && pos.view === view) {\r
            record = pos.record;\r
            column = pos.column;\r
\r
            // After a refresh, recreate the selection using the same record and grid column as before\r
            if (!column.isDescendantOf(headerCt)) {\r
                // column header is not a child of the header container\r
                // this happens when the grid is reconfigured with new columns\r
                // make a best effor to select something by matching on id, then text, then dataIndex\r
                column = headerCt.queryById(column.id) || \r
                               headerCt.down('[text="' + column.text + '"]') ||\r
                               headerCt.down('[dataIndex="' + column.dataIndex + '"]');\r
            }\r
\r
            // If we have a columnHeader (either the column header that already exists in\r
            // the headerCt, or a suitable match that was found after reconfiguration)\r
            // AND the record still exists in the store (or a record matching the id of\r
            // the previously selected record) We are ok to go ahead and set the selection\r
            if (pos.record) {\r
                if (column && (view.store.indexOfId(record.getId()) !== -1)) {\r
                    newPos = new Ext.grid.CellContext(view).setPosition({\r
                        row: record,\r
                        column: column\r
                    });\r
                    me.setPosition(newPos);\r
                }\r
            } else {\r
                me.selection = null;\r
            }\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Used internally by CellEditing\r
     */\r
    selectByPosition: function(position, suppressEvent) {\r
        this.setPosition(position, suppressEvent);\r
    }\r
});\r