add extjs 6.0.1 sources

[extjs.git] / extjs / packages / ux / classic / src / grid / SubTable.js

/**\r
 * A small grid nested within a parent grid's row. \r
 *\r
 * See the [Kitchen Sink](http://dev.sencha.com/extjs/5.0.1/examples/kitchensink/#customer-grid) for example usage.\r
 */\r
Ext.define('Ext.ux.grid.SubTable', {\r
    extend: 'Ext.grid.plugin.RowExpander',\r
\r
    alias: 'plugin.subtable',\r
\r
    rowBodyTpl: ['<table class="' + Ext.baseCSSPrefix + 'grid-subtable"><tbody>',\r
        '{%',\r
            'this.owner.renderTable(out, values);',\r
        '%}',\r
        '</tbody></table>'\r
    ],\r
\r
    init: function(grid) {\r
        var me = this,\r
            columns = me.columns,\r
            len, i, columnCfg;\r
\r
        me.callParent(arguments);\r
\r
        me.columns = [];\r
        if (columns) {\r
            for (i = 0, len = columns.length; i < len; ++i) {\r
                // Don't register with the component manager, we create them to use\r
                // their rendering smarts, but don't want to treat them as real components\r
                columnCfg = Ext.apply({\r
                    preventRegister: true\r
                }, columns[i]);\r
                columnCfg.xtype = columnCfg.xtype || 'gridcolumn';\r
                me.columns.push(Ext.widget(columnCfg));\r
            }\r
        }\r
    },\r
\r
    destroy: function() {\r
        var columns = this.columns,\r
            len, i;\r
\r
        if (columns) {\r
            for (i = 0, len = columns.length; i < len; ++i) {\r
                columns[i].destroy();\r
            }\r
        }\r
        this.columns = null;\r
        this.callParent();\r
    },\r
\r
    getRowBodyFeatureData: function(record, idx, rowValues) {\r
        this.callParent(arguments);\r
        rowValues.rowBodyCls += ' ' + Ext.baseCSSPrefix + 'grid-subtable-row';\r
    },\r
\r
    renderTable: function(out, rowValues) {\r
        var me = this,\r
            columns = me.columns,\r
            numColumns = columns.length,\r
            associatedRecords = me.getAssociatedRecords(rowValues.record),\r
            recCount = associatedRecords.length,\r
            rec, column, i, j, value;\r
\r
        out.push('<thead>');\r
        for (j = 0; j < numColumns; j++) {\r
            out.push('<th class="' + Ext.baseCSSPrefix + 'grid-subtable-header">', columns[j].text, '</th>');\r
        }\r
        out.push('</thead>');\r
        for (i = 0; i < recCount; i++) {\r
            rec = associatedRecords[i];\r
            out.push('<tr>');\r
            for (j = 0; j < numColumns; j++) {\r
                column = columns[j];\r
                value = rec.get(column.dataIndex);\r
                if (column.renderer && column.renderer.call) {\r
                    value = column.renderer.call(column.scope || me, value, {}, rec);\r
                }\r
                out.push('<td class="' + Ext.baseCSSPrefix + 'grid-subtable-cell"');\r
                if (column.width != null) {\r
                    out.push(' style="width:' + column.width + 'px"');\r
                }\r
                out.push('><div class="' + Ext.baseCSSPrefix + 'grid-cell-inner">', value, '</div></td>');\r
            }\r
            out.push('</tr>');\r
        }\r
    },\r
    \r
    getRowBodyContentsFn: function(rowBodyTpl) {\r
        var me = this;\r
        return function (rowValues) {\r
            rowBodyTpl.owner = me;\r
            return rowBodyTpl.applyTemplate(rowValues);\r
        };\r
    },\r
    \r
    getAssociatedRecords: function(record) {\r
        return record[this.association]().getRange();\r
    }\r
});