add extjs 6.0.1 sources

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

/**\r
 * A selection model that renders a column of checkboxes that can be toggled to\r
 * select or deselect rows. The default mode for this selection model is MULTI.\r
 *\r
 *       @example\r
 *       var store = Ext.create('Ext.data.Store', {\r
 *           fields: ['name', 'email', 'phone'],\r
 *           data: [{\r
 *               name: 'Lisa',\r
 *               email: 'lisa@simpsons.com',\r
 *               phone: '555-111-1224'\r
 *           }, {\r
 *               name: 'Bart',\r
 *               email: 'bart@simpsons.com',\r
 *               phone: '555-222-1234'\r
 *           }, {\r
 *               name: 'Homer',\r
 *               email: 'homer@simpsons.com',\r
 *               phone: '555-222-1244'\r
 *           }, {\r
 *               name: 'Marge',\r
 *               email: 'marge@simpsons.com',\r
 *               phone: '555-222-1254'\r
 *           }]\r
 *       });\r
 *\r
 *       Ext.create('Ext.grid.Panel', {\r
 *           title: 'Simpsons',\r
 *           store: store,\r
 *           columns: [{\r
 *               text: 'Name',\r
 *               dataIndex: 'name'\r
 *           }, {\r
 *               text: 'Email',\r
 *               dataIndex: 'email',\r
 *               flex: 1\r
 *           }, {\r
 *               text: 'Phone',\r
 *               dataIndex: 'phone'\r
 *           }],\r
 *           height: 200,\r
 *           width: 400,\r
 *           renderTo: Ext.getBody(),\r
 *           selModel: {\r
 *               selType: 'checkboxmodel'\r
 *           }\r
 *       });\r
 *\r
 * The selection model will inject a header for the checkboxes in the first view\r
 * and according to the {@link #injectCheckbox} configuration.\r
 */\r
Ext.define('Ext.selection.CheckboxModel', {\r
    alias: 'selection.checkboxmodel',\r
    extend: 'Ext.selection.RowModel',\r
\r
    /**\r
     * @cfg {"SINGLE"/"SIMPLE"/"MULTI"} mode\r
     * Modes of selection.\r
     * Valid values are `"SINGLE"`, `"SIMPLE"`, and `"MULTI"`.\r
     */\r
    mode: 'MULTI',\r
\r
    /**\r
     * @cfg {Number/String} [injectCheckbox=0]\r
     * The index at which to insert the checkbox column.\r
     * Supported values are a numeric index, and the strings 'first' and 'last'.\r
     */\r
    injectCheckbox: 0,\r
\r
    /**\r
     * @cfg {Boolean} checkOnly\r
     * True if rows can only be selected by clicking on the checkbox column, not by clicking\r
     * on the row itself. Note that this only refers to selection via the UI, programmatic\r
     * selection will still occur regardless.\r
     */\r
    checkOnly: false,\r
    \r
    /**\r
     * @cfg {Boolean} showHeaderCheckbox\r
     * Configure as `false` to not display the header checkbox at the top of the column.\r
     * When the store is a {@link Ext.data.BufferedStore BufferedStore}, this configuration will\r
     * not be available because the buffered data set does not always contain all data. \r
     */\r
    showHeaderCheckbox: undefined,\r
    \r
    /**\r
     * @cfg {String} [checkSelector="x-grid-row-checker"]\r
     * The selector for determining whether the checkbox element is clicked. This may be changed to\r
     * allow for a wider area to be clicked, for example, the whole cell for the selector.\r
     */\r
    checkSelector: '.' + Ext.baseCSSPrefix + 'grid-row-checker',\r
    \r
    allowDeselect: true,\r
\r
    headerWidth: 24,\r
\r
    /**\r
     * @private\r
     */\r
    checkerOnCls: Ext.baseCSSPrefix + 'grid-hd-checker-on',\r
    \r
    tdCls: Ext.baseCSSPrefix + 'grid-cell-special ' + Ext.baseCSSPrefix + 'grid-cell-row-checker',\r
    \r
\r
    constructor: function() {\r
        var me = this;\r
        me.callParent(arguments);\r
\r
        // If mode is single and showHeaderCheck isn't explicity set to\r
        // true, hide it.\r
        if (me.mode === 'SINGLE') {\r
            //<debug>\r
            if (me.showHeaderCheckbox) {\r
                Ext.Error.raise('The header checkbox is not supported for SINGLE mode selection models.');\r
            }\r
            //</debug>\r
            me.showHeaderCheckbox = false;\r
        }\r
    },\r
\r
    beforeViewRender: function(view) {\r
        var me = this,\r
            owner;\r
\r
        me.callParent(arguments);\r
\r
        // if we have a locked header, only hook up to the first\r
        if (!me.hasLockedHeader() || view.headerCt.lockedCt) {\r
            me.addCheckbox(view, true);\r
            owner = view.ownerCt;\r
            // Listen to the outermost reconfigure event\r
            if (view.headerCt.lockedCt) {\r
                owner = owner.ownerCt;\r
            }\r
            me.mon(owner, 'reconfigure', me.onReconfigure, me);\r
        }\r
    },\r
\r
    bindComponent: function(view) {\r
        this.sortable = false;\r
        this.callParent(arguments);\r
    },\r
\r
    hasLockedHeader: function(){\r
        var views     = this.views,\r
            vLen      = views.length,\r
            v;\r
\r
        for (v = 0; v < vLen; v++) {\r
            if (views[v].headerCt.lockedCt) {\r
                return true;\r
            }\r
        }\r
        return false;\r
    },\r
\r
    /**\r
     * Add the header checkbox to the header row\r
     * @private\r
     * @param {Boolean} initial True if we're binding for the first time.\r
     */\r
    addCheckbox: function(view, initial){\r
        var me = this,\r
            checkbox = me.injectCheckbox,\r
            headerCt = view.headerCt;\r
\r
        // Preserve behaviour of false, but not clear why that would ever be done.\r
        if (checkbox !== false) {\r
            if (checkbox === 'first') {\r
                checkbox = 0;\r
            } else if (checkbox === 'last') {\r
                checkbox = headerCt.getColumnCount();\r
            }\r
            Ext.suspendLayouts();\r
            if (view.getStore().isBufferedStore) {\r
                me.showHeaderCheckbox = false;\r
            }\r
            me.column = headerCt.add(checkbox,  me.getHeaderConfig());\r
            Ext.resumeLayouts();\r
        }\r
\r
        if (initial !== true) {\r
            view.refresh();\r
        }\r
    },\r
\r
    /**\r
     * Handles the grid's reconfigure event.  Adds the checkbox header if the columns have been reconfigured.\r
     * @private\r
     * @param {Ext.panel.Table} grid\r
     * @param {Ext.data.Store} store\r
     * @param {Object[]} columns\r
     */\r
    onReconfigure: function(grid, store, columns) {\r
        if (columns) {\r
            this.addCheckbox(this.views[0]);\r
        }\r
    },\r
\r
    /**\r
     * Toggle the ui header between checked and unchecked state.\r
     * @param {Boolean} isChecked\r
     * @private\r
     */\r
    toggleUiHeader: function(isChecked) {\r
        var view     = this.views[0],\r
            headerCt = view.headerCt,\r
            checkHd  = headerCt.child('gridcolumn[isCheckerHd]'),\r
            cls = this.checkerOnCls;\r
\r
        if (checkHd) {\r
            if (isChecked) {\r
                checkHd.addCls(cls);\r
            } else {\r
                checkHd.removeCls(cls);\r
            }\r
        }\r
    },\r
\r
    /**\r
     * Toggle between selecting all and deselecting all when clicking on\r
     * a checkbox header.\r
     */\r
    onHeaderClick: function(headerCt, header, e) {\r
        var me = this,\r
            isChecked;\r
\r
        if (header === me.column && me.mode !== 'SINGLE') {\r
            e.stopEvent();\r
            isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');\r
\r
            if (isChecked) {\r
                me.deselectAll();\r
            } else {\r
                me.selectAll();\r
            }\r
        }\r
    },\r
\r
    /**\r
     * Retrieve a configuration to be used in a HeaderContainer.\r
     * This should be used when injectCheckbox is set to false.\r
     */\r
    getHeaderConfig: function() {\r
        var me = this,\r
            showCheck = me.showHeaderCheckbox !== false;\r
\r
        return {\r
            xtype: 'gridcolumn',\r
            ignoreExport: true,\r
            isCheckerHd: showCheck,\r
            text : '&#160;',\r
            clickTargetName: 'el',\r
            width: me.headerWidth,\r
            sortable: false,\r
            draggable: false,\r
            resizable: false,\r
            hideable: false,\r
            menuDisabled: true,\r
            dataIndex: '',\r
            tdCls: me.tdCls,\r
            cls: showCheck ? Ext.baseCSSPrefix + 'column-header-checkbox ' : '',\r
            defaultRenderer: me.renderer.bind(me),\r
            editRenderer: me.editRenderer || me.renderEmpty,\r
            locked: me.hasLockedHeader(),\r
            processEvent: me.processColumnEvent\r
        };\r
    },\r
\r
    /**\r
     * @private\r
     * Process and refire events routed from the Ext.panel.Table's processEvent method.\r
     * Also fires any configured click handlers. By default, cancels the mousedown event to prevent selection.\r
     * Returns the event handler's status to allow canceling of GridView's bubbling process.\r
     */\r
    processColumnEvent : function(type, view, cell, recordIndex, cellIndex, e, record, row) {\r
        var navModel = view.getNavigationModel();\r
\r
        // Fire a navigate event upon SPACE in acvtionable mode.\r
        // SPACE events are ignored by the NavModel in actionable mode.\r
        if (e.type === 'keydown' && view.actionableMode && e.getKey() === e.SPACE) {\r
            navModel.fireEvent('navigate', {\r
                view: view,\r
                navigationModel: navModel,\r
                keyEvent: e,\r
                position: e.position,\r
                recordIndex: recordIndex,\r
                record: record,\r
                item: e.item,\r
                cell: e.position.cellElement,\r
                columnIndex: e.position.colIdx,\r
                column: e.position.column\r
            });\r
        }\r
    },\r
\r
    renderEmpty: function() {\r
        return '&#160;';\r
    },\r
\r
    // After refresh, ensure that the header checkbox state matches\r
    refresh: function() {\r
        this.callParent(arguments);\r
        this.updateHeaderState();\r
    },\r
\r
    /**\r
     * Generates the HTML to be rendered in the injected checkbox column for each row.\r
     * Creates the standard checkbox markup by default; can be overridden to provide custom rendering.\r
     * See {@link Ext.grid.column.Column#renderer} for description of allowed parameters.\r
     */\r
    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {\r
        return '<div class="' + Ext.baseCSSPrefix + 'grid-row-checker" role="button" tabIndex="0">&#160;</div>';\r
    },\r
   \r
    selectByPosition: function (position, keepExisting) {\r
        if (!position.isCellContext) {\r
            position = new Ext.grid.CellContext(this.view).setPosition(position.row, position.column);\r
        }\r
\r
        // Do not select if checkOnly, and the requested position is not the check column\r
        if (!this.checkOnly || position.column === this.column) {\r
            this.callParent([position, keepExisting]);\r
        }\r
    },\r
\r
    /**\r
     * Synchronize header checker value as selection changes.\r
     * @private\r
     */\r
    onSelectChange: function() {\r
        this.callParent(arguments);\r
        if (!this.suspendChange) {\r
            this.updateHeaderState();\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onStoreLoad: function() {\r
        this.callParent(arguments);\r
        this.updateHeaderState();\r
    },\r
\r
    onStoreAdd: function() {\r
        this.callParent(arguments);\r
        this.updateHeaderState();\r
    },\r
\r
    onStoreRemove: function() {\r
        this.callParent(arguments);\r
        this.updateHeaderState();\r
    },\r
    \r
    onStoreRefresh: function(){\r
        this.callParent(arguments);    \r
        this.updateHeaderState();\r
    },\r
    \r
    maybeFireSelectionChange: function(fireEvent) {\r
        if (fireEvent && !this.suspendChange) {\r
            this.updateHeaderState();\r
        }\r
        this.callParent(arguments);\r
    },\r
    \r
    resumeChanges: function(){\r
        this.callParent();\r
        if (!this.suspendChange) {\r
            this.updateHeaderState();\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    updateHeaderState: function() {\r
        // check to see if all records are selected\r
        var me = this,\r
            store = me.store,\r
            storeCount = store.getCount(),\r
            views = me.views,\r
            hdSelectStatus = false,\r
            selectedCount = 0,\r
            selected, len, i;\r
            \r
        if (!store.isBufferedStore && storeCount > 0) {\r
            selected = me.selected;\r
            hdSelectStatus = true;\r
            for (i = 0, len = selected.getCount(); i < len; ++i) {\r
                if (store.indexOfId(selected.getAt(i).id) === -1) {\r
                    break;\r
                }\r
                ++selectedCount;\r
            }\r
            hdSelectStatus = storeCount === selectedCount;\r
        }\r
            \r
        if (views && views.length) {\r
            me.toggleUiHeader(hdSelectStatus);\r
        }\r
    },\r
\r
    vetoSelection: function(e) {\r
        var me = this,\r
            column = me.column,\r
            veto, isClick, isSpace;\r
\r
        if (me.checkOnly) {\r
            isClick = e.type === 'click' && e.getTarget(me.checkSelector);\r
            isSpace = e.getKey() === e.SPACE && e.position.column === column;\r
            veto = !(isClick || isSpace);\r
        }\r
        return veto || me.callParent([e]);\r
    },\r
\r
    destroy: function() {\r
        this.column = null;\r
        this.callParent();\r
    },\r
\r
    privates: {\r
        onBeforeNavigate: function(metaEvent) {\r
            var e = metaEvent.keyEvent;\r
            if (this.selectionMode !== 'SINGLE') {\r
                metaEvent.ctrlKey = metaEvent.ctrlKey || e.ctrlKey || (e.type === 'click' && !e.shiftKey) || e.getKey() === e.SPACE;\r
            }\r
        },\r
\r
        selectWithEventMulti: function(record, e, isSelected) {\r
            var me = this;\r
\r
            if (!e.shiftKey && !e.ctrlKey && e.getTarget(me.checkSelector)) {\r
                if (isSelected) {\r
                    me.doDeselect(record);\r
                } else {\r
                    me.doSelect(record, true);\r
                }\r
            } else {\r
                me.callParent([record, e, isSelected]);\r
            }\r
        }\r
    }\r
});\r