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