add extjs 6.0.1 sources

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

// feature idea to enable Ajax loading and then the content\r
// cache would actually make sense. Should we dictate that they use\r
// data or support raw html as well?\r
\r
/**\r
 * Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables\r
 * a second row body which expands/contracts.  The expand/contract behavior is configurable to react\r
 * on clicking of the column, double click of the row, and/or hitting enter while a row is selected.\r
 */\r
Ext.define('Ext.grid.plugin.RowExpander', {\r
    extend: 'Ext.plugin.Abstract',\r
    lockableScope: 'normal',\r
\r
    requires: [\r
        'Ext.grid.feature.RowBody'\r
    ],\r
\r
    alias: 'plugin.rowexpander',\r
\r
    /**\r
     * @cfg {Number} [columnWidth=24]\r
     * The width of the row expander column which contains the [+]/[-] icons to toggle row expansion.\r
     */\r
    columnWidth: 24,\r
\r
    /**\r
     * @cfg {Ext.XTemplate} rowBodyTpl\r
     * An XTemplate which, when passed a record data object, produces HTML for the expanded row content.\r
     *\r
     * Note that if this plugin is applied to a lockable grid, the rowBodyTpl applies to the normal (unlocked) side.\r
     * See {@link #lockedTpl}\r
     *\r
     */\r
    rowBodyTpl: null,\r
\r
    /**\r
     * @cfg {Ext.XTemplate} [lockedTpl]\r
     * An XTemplate which, when passed a record data object, produces HTML for the expanded row content *on the locked side of a lockable grid*.\r
     */\r
    lockedTpl: null,\r
\r
    /**\r
     * @cfg {Boolean} expandOnEnter\r
     * This config is no longer supported. The Enter key initiated the grid's actinoable mode.\r
     */\r
\r
    /**\r
     * @cfg {Boolean} expandOnDblClick\r
     * `true` to toggle a row between expanded/collapsed when double clicked\r
     * (defaults to `true`).\r
     */\r
    expandOnDblClick: true,\r
\r
    /**\r
     * @cfg {Boolean} selectRowOnExpand\r
     * `true` to select a row when clicking on the expander icon\r
     * (defaults to `false`).\r
     */\r
    selectRowOnExpand: false,\r
\r
    /**\r
     * @cfg {Number}\r
     * The width of the Row Expander column header\r
     */\r
    headerWidth: 24,\r
    \r
    /**\r
     * @cfg {Boolean} [bodyBefore=false]\r
     * Configure as `true` to put the row expander body *before* the data row.\r
     * \r
     */\r
    bodyBefore: false,\r
\r
    rowBodyTrSelector: '.' + Ext.baseCSSPrefix + 'grid-rowbody-tr',\r
    rowBodyHiddenCls: Ext.baseCSSPrefix + 'grid-row-body-hidden',\r
    rowCollapsedCls: Ext.baseCSSPrefix + 'grid-row-collapsed',\r
\r
    addCollapsedCls: {\r
        fn: function(out, values, parent) {\r
            var me = this.rowExpander;\r
            if (!me.recordsExpanded[values.record.internalId]) {\r
                values.itemClasses.push(me.rowCollapsedCls);\r
            }\r
            this.nextTpl.applyOut(values, out, parent);\r
        },\r
\r
        syncRowHeights: function(lockedItem, normalItem) {\r
            this.rowExpander.syncRowHeights(lockedItem, normalItem);\r
        },\r
\r
        // We need a high priority to get in ahead of the outerRowTpl\r
        // so we can setup row data\r
        priority: 20000\r
    },\r
\r
    /**\r
     * @event expandbody\r
     * **Fired through the grid's View**\r
     * @param {HTMLElement} rowNode The <tr> element which owns the expanded row.\r
     * @param {Ext.data.Model} record The record providing the data.\r
     * @param {HTMLElement} expandRow The <tr> element containing the expanded data.\r
     */\r
    /**\r
     * @event collapsebody\r
     * **Fired through the grid's View.**\r
     * @param {HTMLElement} rowNode The <tr> element which owns the expanded row.\r
     * @param {Ext.data.Model} record The record providing the data.\r
     * @param {HTMLElement} expandRow The <tr> element containing the expanded data.\r
     */\r
\r
    setCmp: function(grid) {\r
        var me = this,\r
            features;\r
\r
        me.callParent(arguments);\r
\r
        me.recordsExpanded = {};\r
        // <debug>\r
        if (!me.rowBodyTpl) {\r
            Ext.raise("The 'rowBodyTpl' config is required and is not defined.");\r
        }\r
        // </debug>\r
\r
        me.rowBodyTpl = Ext.XTemplate.getTpl(me, 'rowBodyTpl');\r
        features = me.getFeatureConfig(grid);\r
\r
        if (grid.features) {\r
            grid.features = Ext.Array.push(features, grid.features);\r
        } else {\r
            grid.features = features;\r
        }\r
        // NOTE: features have to be added before init (before Table.initComponent)\r
    },\r
\r
    /**\r
     * @protected\r
     * @return {Array} And array of Features or Feature config objects.\r
     * Returns the array of Feature configurations needed to make the RowExpander work.\r
     * May be overridden in a subclass to modify the returned array.\r
     */\r
    getFeatureConfig: function(grid) {\r
        var me = this,\r
            features = [],\r
            featuresCfg = {\r
                ftype: 'rowbody',\r
                rowExpander: me,\r
                bodyBefore: me.bodyBefore,\r
                recordsExpanded: me.recordsExpanded,\r
                rowBodyHiddenCls: me.rowBodyHiddenCls,\r
                rowCollapsedCls: me.rowCollapsedCls,\r
                setupRowData: me.getRowBodyFeatureData,\r
                setup: me.setup\r
            };\r
\r
        features.push(Ext.apply({\r
            lockableScope: 'normal',\r
            getRowBodyContents: me.getRowBodyContentsFn(me.rowBodyTpl)\r
        }, featuresCfg));\r
\r
        // Locked side will need a copy to keep the two DOM structures symmetrical.\r
        // A lockedTpl config is available to create content in locked side.\r
        // The enableLocking flag is set early in Ext.panel.Table#initComponent if any columns are locked.\r
        if (grid.enableLocking) {\r
            features.push(Ext.apply({\r
                lockableScope: 'locked',\r
                getRowBodyContents: me.lockedTpl ? me.getRowBodyContentsFn(me.lockedTpl) : function() {return '';}\r
            }, featuresCfg));\r
        }\r
\r
        return features;\r
    },\r
    \r
    getRowBodyContentsFn: function(rowBodyTpl) {\r
        var me = this;\r
        return function (rowValues) {\r
            rowBodyTpl.owner = me;\r
            return rowBodyTpl.applyTemplate(rowValues.record.getData());\r
        };\r
    },\r
\r
    init: function(grid) {\r
        if (grid.lockable) {\r
            grid = grid.normalGrid;\r
        }\r
\r
        var me = this,\r
            ownerLockable = grid.ownerLockable,\r
            view, lockedView;\r
\r
        me.callParent(arguments);\r
        me.grid = grid;\r
        view = me.view = grid.getView();\r
\r
        // Bind to view for key and mouse events\r
        // Add row processor which adds collapsed class\r
        me.bindView(view);\r
        view.addRowTpl(me.addCollapsedCls).rowExpander = me;\r
\r
        // If the owning grid is lockable, ensure the collapsed class is applied to the locked side by adding a row processor.\r
        if (ownerLockable) {\r
            me.addExpander(ownerLockable.lockedGrid.headerCt.items.getCount() ? ownerLockable.lockedGrid : grid);\r
\r
            // If our client grid part of a lockable grid, we listen to its ownerLockable's beforereconfigure\r
            lockedView = ownerLockable.lockedGrid.getView();\r
\r
            // Bind to locked view for key and mouse events\r
            // Add row processor which adds collapsed class\r
            me.bindView(lockedView);\r
            lockedView.addRowTpl(me.addCollapsedCls).rowExpander = me;\r
            ownerLockable.mon(ownerLockable, {\r
                processcolumns: me.onLockableProcessColumns,\r
                lockcolumn: me.onColumnLock,\r
                unlockcolumn: me.onColumnUnlock,\r
                scope: me\r
            });\r
\r
            // Process items added.\r
            // It may be a re-rendering by the buffered renderer of an expanded item.\r
            // If so, schedule a syncRowHeights call.\r
            me.viewListeners = view.on({\r
                itemadd: me.onItemAdd,\r
                scope: me\r
            });\r
        } else {\r
            me.addExpander(grid);\r
            grid.on('beforereconfigure', me.beforeReconfigure, me);\r
        }\r
    },\r
\r
    onItemAdd: function(newRecords, startIndex, newItems) {\r
        var me = this,\r
            ownerLockable = me.grid.ownerLockable,\r
            lockableSyncRowHeights = me.lockableSyncRowHeights || (me.lockableSyncRowHeights = Ext.Function.createAnimationFrame(ownerLockable.syncRowHeights, ownerLockable)),\r
            len = newItems.length,\r
            i;\r
\r
        // If any added items are expanded, we will need a syncRowHeights call on next animation frame\r
        for (i = 0; i < len; i++) {\r
            if (!Ext.fly(newItems[i]).hasCls(me.rowCollapsedCls)) {\r
                lockableSyncRowHeights();\r
                return;\r
            }\r
        }\r
    },\r
\r
    beforeReconfigure: function(grid, store, columns, oldStore, oldColumns) {\r
        var me = this;\r
\r
        if (me.viewListeners) {\r
            me.viewListeners.destroy();    \r
        }\r
        \r
        if (columns) {\r
            me.expanderColumn = new Ext.grid.Column(me.getHeaderConfig());    \r
            columns.unshift(me.expanderColumn);\r
        }\r
        \r
    },\r
\r
    onLockableProcessColumns: function(lockable, lockedHeaders, normalHeaders) {\r
        this.addExpander(lockedHeaders.length ? lockable.lockedGrid : lockable.normalGrid);\r
    },\r
\r
    /**\r
     * @private\r
     * Inject the expander column into the correct grid.\r
     *\r
     * If we are expanding the normal side of a lockable grid, poke the column into the locked side if the locked side has columns\r
     */\r
    addExpander: function(expanderGrid) {\r
        var me = this;\r
\r
        me.grid = expanderGrid;\r
        me.expanderColumn = expanderGrid.headerCt.insert(0, me.getHeaderConfig());\r
\r
        // If a CheckboxModel, it must now put its checkbox in at position one because this\r
        // cell always gets in at position zero, and spans 2 columns.\r
        expanderGrid.getSelectionModel().injectCheckbox = 1;\r
    },\r
\r
    getRowBodyFeatureData: function(record, idx, rowValues) {\r
        var me = this;\r
\r
        me.self.prototype.setupRowData.apply(me, arguments);\r
\r
        rowValues.rowBody = me.getRowBodyContents(rowValues);\r
        rowValues.rowBodyCls = me.recordsExpanded[record.internalId] ? '' : me.rowBodyHiddenCls;\r
    },\r
\r
    setup: function(rows, rowValues){\r
        var me = this,\r
            lockable = me.grid.ownerLockable;\r
\r
        me.self.prototype.setup.apply(me, arguments);\r
\r
        // If we are lockable, and we are setting up the side which has the expander column, it is row spanning so we don't have to colspan it\r
        if (lockable && Ext.Array.indexOf(me.grid.columnManager.getColumns(), me.rowExpander.expanderColumn) !== -1) {\r
            rowValues.rowBodyColspan -= 1;\r
        }\r
    },\r
\r
    bindView: function(view) {\r
        view.on('itemkeydown', this.onKeyDown, this);\r
        if (this.expandOnDblClick) {\r
            view.on('itemdblclick', this.onDblClick, this);\r
        }\r
    },\r
\r
    onKeyDown: function(view, record, row, rowIdx, e) {\r
        var me = this,\r
            key = e.getKey(),\r
            pos = view.getNavigationModel().getPosition(),\r
            isCollapsed;\r
\r
        if (pos) {\r
            row = Ext.fly(row);\r
            isCollapsed = row.hasCls(me.rowCollapsedCls);\r
\r
            // + key on collapsed or - key on expanded\r
            if (((key === 107  || (key === 187 && e.shiftKey)) && isCollapsed) || ((key === 109 || key === 189) && !isCollapsed)) {\r
                me.toggleRow(rowIdx, record);\r
            }\r
        }\r
    },\r
\r
    onDblClick: function(view, record, row, rowIdx, e) {\r
        this.toggleRow(rowIdx, record);\r
    },\r
\r
    toggleRow: function(rowIdx, record) {\r
        var me = this,\r
            view = me.view,\r
            bufferedRenderer = view.bufferedRenderer,\r
            scroller = view.getScrollable(),\r
            fireView = view,\r
            rowNode = view.getNode(rowIdx),\r
            normalRow = Ext.fly(rowNode),\r
            lockedRow,\r
            nextBd = normalRow.down(me.rowBodyTrSelector, true),\r
            wasCollapsed = normalRow.hasCls(me.rowCollapsedCls),\r
            addOrRemoveCls = wasCollapsed ? 'removeCls' : 'addCls',\r
\r
            // The expander column should be rowSpan="2" only when the expander is expanded\r
            rowSpan = wasCollapsed ? 2 : 1,\r
            ownerLockable = me.grid.ownerLockable,\r
            expanderCell;\r
\r
        normalRow[addOrRemoveCls](me.rowCollapsedCls);\r
        Ext.fly(nextBd)[addOrRemoveCls](me.rowBodyHiddenCls);\r
        me.recordsExpanded[record.internalId] = wasCollapsed;\r
\r
        // Sync the collapsed/hidden classes on the locked side\r
        if (me.grid.ownerLockable) {\r
\r
            // It's the top level grid's LockingView that does the firing when there's a lockable assembly involved.\r
            fireView = ownerLockable.getView();\r
\r
            // Only attempt to toggle lockable side if it is visible.\r
            if (ownerLockable.lockedGrid.isVisible()) {\r
\r
                view = ownerLockable.view.lockedGrid.view;\r
\r
                // Process the locked side.\r
                lockedRow = Ext.fly(view.getNode(rowIdx));\r
                // Just because the grid is locked, doesn't mean we'll necessarily have a locked row.\r
                if (lockedRow) {\r
                    lockedRow[addOrRemoveCls](me.rowCollapsedCls);\r
\r
                    // If there is a template for expander content in the locked side, toggle that side too\r
                    nextBd = lockedRow.down(me.rowBodyTrSelector, true);\r
                    Ext.fly(nextBd)[addOrRemoveCls](me.rowBodyHiddenCls);\r
                }\r
            }\r
        }\r
\r
        // Here is where we set the rowSpan on this plugin's row expander cell.\r
        // It should be rowSpan="2" only when the expander row is visible.\r
        if (me.expanderColumn) {\r
            expanderCell = Ext.fly(view.getRow(rowIdx)).down(me.expanderColumn.getCellSelector(), true);\r
            if (expanderCell) {\r
                expanderCell.rowSpan = rowSpan;    \r
            }\r
        }\r
        \r
        fireView.fireEvent(wasCollapsed ? 'expandbody' : 'collapsebody', rowNode, record, nextBd);\r
\r
        // Layout needed of we are shrinkwrapping height, or there are locked/unlocked sides to sync\r
        // Will sync the expander row heights between locked and normal sides\r
        if (view.getSizeModel().height.shrinkWrap || ownerLockable) {\r
            view.refreshSize(true);\r
        }\r
        // If we are using the touch scroller, ensure that the scroller knows about\r
        // the correct scrollable range\r
        if (scroller) {\r
            if (bufferedRenderer) {\r
                bufferedRenderer.refreshSize();\r
            } else {\r
                scroller.refresh(true);\r
            }\r
        }    \r
    },\r
\r
    // Called from TableLayout.finishedLayout\r
    syncRowHeights: function(lockedItem, normalItem) {\r
        var me = this,\r
            lockedBd = Ext.fly(lockedItem).down(me.rowBodyTrSelector),\r
            normalBd = Ext.fly(normalItem).down(me.rowBodyTrSelector),\r
            lockedHeight,\r
            normalHeight;\r
\r
        // If expanded, we have to ensure expander row heights are synched\r
        if (normalBd.isVisible()) {\r
\r
            // If heights are different, expand the smallest one\r
            if ((lockedHeight = lockedBd.getHeight()) !== (normalHeight = normalBd.getHeight())) {\r
                if (lockedHeight > normalHeight) {\r
                    normalBd.setHeight(lockedHeight);\r
                } else {\r
                    lockedBd.setHeight(normalHeight);\r
                }\r
            }\r
        }\r
        // When not expanded we do not control the heights\r
        else {\r
            lockedBd.dom.style.height = normalBd.dom.style.height = '';\r
        }\r
    },\r
\r
    onColumnUnlock: function(lockable, column) {\r
        var me = this,\r
            lockedColumns;\r
        \r
        lockable = me.grid.ownerLockable;\r
        lockedColumns = lockable.lockedGrid.visibleColumnManager.getColumns();\r
        \r
        // User has unlocked all columns and left only the expander column in the locked side.\r
        if (lockedColumns.length === 1) {\r
            if (lockedColumns[0] === me.expanderColumn) {\r
                lockable.unlock(me.expanderColumn);\r
                me.grid = lockable.normalGrid;\r
            } else {\r
                lockable.lock(me.expanderColumn, 0);\r
            }\r
        }\r
    },\r
\r
    onColumnLock: function(lockable, column) {\r
        var me = this,\r
            lockedColumns,\r
            lockedGrid;\r
        \r
        lockable = me.grid.ownerLockable;\r
        lockedColumns = lockable.lockedGrid.visibleColumnManager.getColumns();\r
        \r
        // User has unlocked all columns and left only the expander column in the locked side.\r
        if (lockedColumns.length === 1) {\r
            me.grid = lockedGrid = lockable.lockedGrid;\r
            lockedGrid.headerCt.insert(0, me.expanderColumn);\r
        }\r
    },\r
\r
    getHeaderConfig: function() {\r
        var me = this,\r
            lockable = me.grid.ownerLockable;\r
\r
        return {\r
            width: me.headerWidth,\r
            ignoreExport: true,\r
            lockable: false,\r
            autoLock: true,\r
            sortable: false,\r
            resizable: false,\r
            draggable: false,\r
            hideable: false,\r
            menuDisabled: true,\r
            tdCls: Ext.baseCSSPrefix + 'grid-cell-special',\r
            innerCls: Ext.baseCSSPrefix + 'grid-cell-inner-row-expander',\r
            renderer: function() {\r
                return '<div class="' + Ext.baseCSSPrefix + 'grid-row-expander" role="presentation" tabIndex="0"></div>';\r
            },\r
            processEvent: function(type, view, cell, rowIndex, cellIndex, e, record) {\r
                if ((type === "click" && e.getTarget('.' + Ext.baseCSSPrefix + 'grid-row-expander')) || (type === 'keydown' && e.getKey() === e.SPACE)) {\r
                    me.toggleRow(rowIndex, record);\r
                    return me.selectRowOnExpand;\r
                }\r
            },\r
\r
            // This column always migrates to the locked side if the locked side is visible.\r
            // It has to report this correctly so that editors can position things correctly\r
            isLocked: function() {\r
                return lockable && (lockable.lockedGrid.isVisible() || this.locked);\r
            },\r
\r
            // In an editor, this shows nothing.\r
            editRenderer: function() {\r
                return '&#160;';\r
            }\r
        };\r
    }\r
});\r