add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / grid / feature / RowBody.js

/**\r
 * The rowbody feature enhances the grid's markup to have an additional\r
 * tr -> td -> div which spans the entire width of the original row.\r
 *\r
 * This is useful to to associate additional information with a particular\r
 * record in an Ext.grid.Grid.\r
 *\r
 * Rowbodies are initially hidden unless you override {@link #getAdditionalData}.\r
 *\r
 * The events fired by RowBody are relayed to the owning \r
 * {@link Ext.view.Table grid view} (and subsequently the owning grid).\r
 *\r
 * # Example\r
 *\r
 *     @example\r
 *     Ext.define('Animal', {\r
 *         extend: 'Ext.data.Model',\r
 *         fields: ['name', 'latin', 'desc', 'lifespan']\r
 *     });\r
 *     \r
 *     Ext.create('Ext.grid.Panel', {\r
 *         width: 400,\r
 *         height: 300,\r
 *         renderTo: Ext.getBody(),\r
 *         store: {\r
 *             model: 'Animal',\r
 *             data: [{\r
 *                 name: 'Tiger',\r
 *                 latin: 'Panthera tigris',\r
 *                 desc: 'The largest cat species, weighing up to 306 kg (670 lb).',\r
 *                 lifespan: '20 - 26 years (in captivity)'\r
 *             }, {\r
 *                 name: 'Roman snail',\r
 *                 latin: 'Helix pomatia',\r
 *                 desc: 'A species of large, edible, air-breathing land snail.',\r
 *                 lifespan: '20 - 35 years'\r
 *             }, {\r
 *                 name: 'Yellow-winged darter',\r
 *                 latin: 'Sympetrum flaveolum',\r
 *                 desc: 'A dragonfly found in Europe and mid and Northern China.',\r
 *                 lifespan: '4 - 6 weeks'\r
 *             }, {\r
 *                 name: 'Superb Fairy-wren',\r
 *                 latin: 'Malurus cyaneus',\r
 *                 desc: 'Common and familiar across south-eastern Australia.',\r
 *                 lifespan: '5 - 6 years'\r
 *             }]\r
 *         },\r
 *         columns: [{\r
 *             dataIndex: 'name',\r
 *             text: 'Common name',\r
 *             width: 125\r
 *         }, {\r
 *             dataIndex: 'latin',\r
 *             text: 'Scientific name',\r
 *             flex: 1\r
 *         }],\r
 *         features: [{\r
 *             ftype: 'rowbody',\r
 *             getAdditionalData: function (data, idx, record, orig) {\r
 *                 // Usually you would style the my-body-class in a CSS file\r
 *                 return {\r
 *                     rowBody: '<div style="padding: 1em">' + record.get("desc") + '</div>',\r
 *                     rowBodyCls: "my-body-class"\r
 *                 };\r
 *             }\r
 *         }],\r
 *         listeners: {\r
 *             rowbodyclick: function(view, rowEl, e, eOpts) {\r
 *                 var itemEl = Ext.get(rowEl).up(view.itemSelector),\r
 *                     rec = view.getRecord(itemEl);\r
 *                 \r
 *                 Ext.Msg.alert(rec.get('name') + ' life span', rec.get('lifespan'));\r
 *             }\r
 *         }\r
 *     });\r
 *\r
 *  # Cell Editing and Cell Selection Model\r
 *\r
 * Note that if {@link Ext.grid.plugin.CellEditing cell editing} or the {@link Ext.selection.CellModel cell selection model} are going\r
 * to be used, then the {@link Ext.grid.feature.RowBody RowBody} feature, or {@link Ext.grid.plugin.RowExpander RowExpander} plugin MUST\r
 * be used for intra-cell navigation to be correct.\r
 */\r
Ext.define('Ext.grid.feature.RowBody', {\r
    extend: 'Ext.grid.feature.Feature',\r
    alias: 'feature.rowbody',\r
\r
    rowBodyCls: Ext.baseCSSPrefix + 'grid-row-body',\r
    rowBodyHiddenCls: Ext.baseCSSPrefix + 'grid-row-body-hidden',\r
    rowBodyTdSelector: 'td.' + Ext.baseCSSPrefix + 'grid-cell-rowbody',\r
    eventPrefix: 'rowbody',\r
    eventSelector: 'tr.' + Ext.baseCSSPrefix + 'grid-rowbody-tr',\r
\r
    colSpanDecrement: 0,\r
\r
    /**\r
     * @cfg {Boolean} [bodyBefore=false]\r
     * Configure as `true` to put the row expander body *before* the data row.\r
     */\r
    bodyBefore: false,\r
\r
    outerTpl: {\r
        fn: function(out, values, parent) {\r
            var view = values.view,\r
                rowValues = view.rowValues;\r
\r
            this.rowBody.setup(values.rows, rowValues);\r
            this.nextTpl.applyOut(values, out, parent);\r
            this.rowBody.cleanup(values.rows, rowValues);\r
        },\r
        priority: 100\r
    },\r
\r
    extraRowTpl: [\r
        '{%',\r
            'if(this.rowBody.bodyBefore) {',\r
                // MUST output column sizing elements because the first row in this table\r
                // contains one colspanning TD, and that overrides subsequent column width settings.\r
                'values.view.renderColumnSizer(values, out);',\r
            '} else {',\r
                'this.nextTpl.applyOut(values, out, parent);',\r
            '}',\r
            'values.view.rowBodyFeature.setupRowData(values.record, values.recordIndex, values);',\r
        '%}',\r
        '<tr class="' + Ext.baseCSSPrefix + 'grid-rowbody-tr {rowBodyCls}" {ariaRowAttr}>',\r
            '<td class="' + Ext.baseCSSPrefix + 'grid-td ' + Ext.baseCSSPrefix + 'grid-cell-rowbody" colspan="{rowBodyColspan}" {ariaCellAttr}>',\r
                '<div class="' + Ext.baseCSSPrefix + 'grid-rowbody {rowBodyDivCls}" {ariaCellInnerAttr}>{rowBody}</div>',\r
            '</td>',\r
        '</tr>',\r
        '{%',\r
            'if(this.rowBody.bodyBefore) {',\r
                'this.nextTpl.applyOut(values, out, parent);',\r
            '}',\r
        '%}', {\r
            priority: 100,\r
\r
            beginRowSync: function (rowSync) {\r
                rowSync.add('rowBody', this.owner.eventSelector);\r
            },\r
\r
            syncContent: function(destRow, sourceRow, columnsToUpdate) {\r
                var owner = this.owner,\r
                    destRowBody = Ext.fly(destRow).down(owner.eventSelector, true),\r
                    sourceRowBody;\r
\r
                // Sync the heights of row body elements in each row if they need it.\r
                if (destRowBody && (sourceRowBody = Ext.fly(sourceRow).down(owner.eventSelector, true))) {\r
                    Ext.fly(destRowBody).syncContent(sourceRowBody);\r
                }\r
            }\r
        }\r
    ],\r
\r
    init: function(grid) {\r
        var me = this,\r
            view = me.view = grid.getView();\r
\r
        // The extra data means variableRowHeight\r
        grid.variableRowHeight = view.variableRowHeight = true;\r
        view.rowBodyFeature = me;\r
\r
        grid.mon(view, {\r
            element: 'el',\r
            click: me.onClick,\r
            scope: me\r
        });\r
\r
        view.headerCt.on({\r
            columnschanged: me.onColumnsChanged,\r
            scope: me\r
        });\r
        view.addTpl(me.outerTpl).rowBody = me;\r
        view.addRowTpl(Ext.XTemplate.getTpl(this, 'extraRowTpl')).rowBody = me;\r
        me.callParent(arguments);\r
    },\r
\r
    // Needed to select the data row when clicked on the body row.\r
    onClick: function(e) {\r
        var me = this,\r
            tableRow = e.getTarget(me.eventSelector);\r
\r
        // If we have clicked on a row body TR and its previous (or next - we can put the body first) sibling is a grid row,\r
        // pass that onto the view for processing\r
        if (tableRow && Ext.fly(tableRow = (tableRow.previousSibling || tableRow.nextSibling)).is(me.view.rowSelector)) {\r
            e.target = tableRow;\r
            me.view.handleEvent(e);\r
        }\r
    },\r
\r
    getSelectedRow: function(view, rowIndex) {\r
        var selectedRow = view.getNode(rowIndex);\r
        if (selectedRow) {\r
            return Ext.fly(selectedRow).down(this.eventSelector);\r
        }\r
        return null;\r
    },\r
\r
    // When columns added/removed, keep row body colspan in sync with number of columns.\r
    onColumnsChanged: function(headerCt) {\r
        var items = this.view.el.query(this.rowBodyTdSelector),\r
            colspan = headerCt.getVisibleGridColumns().length,\r
            len = items.length,\r
            i;\r
\r
        for (i = 0; i < len; ++i) {\r
            items[i].setAttribute('colSpan', colspan);\r
        }\r
    },\r
\r
    /**\r
     * @method getAdditionalData\r
     * @protected\r
     * @template\r
     * Provides additional data to the prepareData call within the grid view.\r
     * The rowbody feature adds 3 additional variables into the grid view's template.\r
     * These are `rowBody`, `rowBodyCls`, and `rowBodyColspan`.\r
     * \r
     *  - **rowBody:** *{String}* The HTML to display in the row body element.  Defaults \r
     * to *undefined*.\r
     *  - **rowBodyCls:** *{String}* An optional CSS class (or multiple classes \r
     * separated by spaces) to apply to the row body element.  Defaults to \r
     * {@link #rowBodyCls}.\r
     *  - **rowBodyColspan:** *{Number}* The number of columns that the row body element \r
     * should span.  Defaults to the number of visible columns.\r
     * \r
     * @param {Object} data The data for this particular record.\r
     * @param {Number} idx The row index for this record.\r
     * @param {Ext.data.Model} record The record instance\r
     * @param {Object} orig The original result from the prepareData call to massage.\r
     * @return {Object} An object containing additional variables for use in the grid \r
     * view's template\r
     */\r
    \r
    /*\r
     * @private\r
     */\r
    setupRowData: function(record, rowIndex, rowValues) {\r
        if (this.getAdditionalData) {\r
            Ext.apply(rowValues, this.getAdditionalData(record.data, rowIndex, record, rowValues));\r
        }\r
    },\r
\r
    setup: function(rows, rowValues) {\r
        rowValues.rowBodyCls = this.rowBodyCls;\r
        rowValues.rowBodyColspan = this.view.headerCt.visibleColumnManager.getColumns().length - this.colSpanDecrement;\r
    },\r
\r
    cleanup: function(rows, rowValues) {\r
        rowValues.rowBodyCls = rowValues.rowBodyColspan = rowValues.rowBody = null;\r
    }\r
    \r
    /**\r
     * @event beforerowbodymousedown\r
     * @preventable\r
     * @member Ext.view.Table\r
     * Fires before the mousedown event on a row body element is processed. Return false \r
     * to cancel the default action.\r
     * \r
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is \r
     * used.\r
     * \r
     * @param {Ext.view.View} view The rowbody's owning View\r
     * @param {HTMLElement} rowBodyEl The row body's element\r
     * @param {Ext.event.Event} e The raw event object\r
     */\r
\r
    /**\r
     * @event beforerowbodymouseup\r
     * @preventable\r
     * @member Ext.view.Table\r
     * Fires before the mouseup event on a row body element is processed. Return false \r
     * to cancel the default action.\r
     * \r
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is \r
     * used.\r
     * \r
     * @inheritdoc #beforerowbodymousedown\r
     */\r
\r
    /**\r
     * @event beforerowbodyclick\r
     * @preventable\r
     * @member Ext.view.Table\r
     * Fires before the click event on a row body element is processed. Return false to \r
     * cancel the default action.\r
     * \r
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is \r
     * used.\r
     * \r
     * @inheritdoc #beforerowbodymousedown\r
     */\r
\r
    /**\r
     * @event beforerowbodydblclick\r
     * @preventable\r
     * @member Ext.view.Table\r
     * Fires before the dblclick event on a row body element is processed. Return false \r
     * to cancel the default action.\r
     * \r
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is \r
     * used.\r
     * \r
     * @inheritdoc #beforerowbodymousedown\r
     */\r
\r
    /**\r
     * @event beforerowbodycontextmenu\r
     * @preventable\r
     * @member Ext.view.Table\r
     * Fires before the contextmenu event on a row body element is processed. Return \r
     * false to cancel the default action.\r
     * \r
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is \r
     * used.\r
     * \r
     * @inheritdoc #beforerowbodymousedown\r
     */\r
    \r
    /**\r
     * @event beforerowbodylongpress\r
     * @preventable\r
     * @member Ext.view.Table\r
     * Fires before the longpress event on a row body element is processed. Return \r
     * false to cancel the default action.\r
     * \r
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is \r
     * used.\r
     * \r
     * @inheritdoc #beforerowbodymousedown\r
     */\r
\r
    /**\r
     * @event beforerowbodykeydown\r
     * @preventable\r
     * @member Ext.view.Table\r
     * Fires before the keydown event on a row body element is processed. Return false \r
     * to cancel the default action.\r
     * \r
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is \r
     * used.\r
     * \r
     * @inheritdoc #beforerowbodymousedown\r
     */\r
\r
    /**\r
     * @event beforerowbodykeyup\r
     * @preventable\r
     * @member Ext.view.Table\r
     * Fires before the keyup event on a row body element is processed. Return false to \r
     * cancel the default action.\r
     * \r
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is \r
     * used.\r
     * \r
     * @inheritdoc #beforerowbodymousedown\r
     */\r
\r
    /**\r
     * @event beforerowbodykeypress\r
     * @preventable\r
     * @member Ext.view.Table\r
     * Fires before the keypress event on a row body element is processed. Return false \r
     * to cancel the default action.\r
     * \r
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is \r
     * used.\r
     * \r
     * @inheritdoc #beforerowbodymousedown\r
     */\r
\r
    /**\r
     * @event rowbodymousedown\r
     * @member Ext.view.Table\r
     * Fires when there is a mouse down on a row body element\r
     * \r
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is \r
     * used.\r
     * \r
     * @inheritdoc #beforerowbodymousedown\r
     */\r
\r
    /**\r
     * @event rowbodymouseup\r
     * @member Ext.view.Table\r
     * Fires when there is a mouse up on a row body element\r
     * \r
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is \r
     * used.\r
     * \r
     * @inheritdoc #beforerowbodymousedown\r
     */\r
\r
    /**\r
     * @event rowbodyclick\r
     * @member Ext.view.Table\r
     * Fires when a row body element is clicked\r
     * \r
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is \r
     * used.\r
     * \r
     * @inheritdoc #beforerowbodymousedown\r
     */\r
\r
    /**\r
     * @event rowbodydblclick\r
     * @member Ext.view.Table\r
     * Fires when a row body element is double clicked\r
     * \r
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is \r
     * used.\r
     * \r
     * @inheritdoc #beforerowbodymousedown\r
     */\r
\r
    /**\r
     * @event rowbodycontextmenu\r
     * @member Ext.view.Table\r
     * Fires when a row body element is right clicked\r
     * \r
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is \r
     * used.\r
     * \r
     * @inheritdoc #beforerowbodymousedown\r
     */\r
    \r
    /**\r
     * @event rowbodylongpress\r
     * @member Ext.view.Table\r
     * Fires on a row body element longpress event\r
     * \r
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is \r
     * used.\r
     * \r
     * @inheritdoc #beforerowbodymousedown\r
     */\r
\r
    /**\r
     * @event rowbodykeydown\r
     * @member Ext.view.Table\r
     * Fires when a key is pressed down while a row body element is currently selected\r
     * \r
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is \r
     * used.\r
     * \r
     * @inheritdoc #beforerowbodymousedown\r
     */\r
\r
    /**\r
     * @event rowbodykeyup\r
     * @member Ext.view.Table\r
     * Fires when a key is released while a row body element is currently selected\r
     * \r
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is \r
     * used.\r
     * \r
     * @inheritdoc #beforerowbodymousedown\r
     */\r
\r
    /**\r
     * @event rowbodykeypress\r
     * @member Ext.view.Table\r
     * Fires when a key is pressed while a row body element is currently selected.\r
     * \r
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is \r
     * used.\r
     * \r
     * @inheritdoc #beforerowbodymousedown\r
     */\r
});\r