/*
This file is part of Ext JS 4.2
Copyright (c) 2011-2013 Sencha Inc
Contact: http://www.sencha.com/contact
GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as
published by the Free Software Foundation and appearing in the file LICENSE included in the
packaging of this file.
Please review the following information to ensure the GNU General Public License version 3.0
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
If you are unsure which license is appropriate for your use, please contact the sales department
at http://www.sencha.com/contact.
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
*/
/**
* The rowbody feature enhances the grid's markup to have an additional
* tr -> td -> div which spans the entire width of the original row.
*
* This is useful to to associate additional information with a particular
* record in a grid.
*
* Rowbodies are initially hidden unless you override setupRowData.
*
* Will expose additional events on the gridview with the prefix of 'rowbody'.
* For example: 'rowbodyclick', 'rowbodydblclick', 'rowbodycontextmenu'.
*
* # Example
*
* @example
* Ext.define('Animal', {
* extend: 'Ext.data.Model',
* fields: ['name', 'latin', 'desc']
* });
*
* Ext.create('Ext.grid.Panel', {
* width: 400,
* height: 300,
* renderTo: Ext.getBody(),
* store: {
* model: 'Animal',
* data: [
* {name: 'Tiger', latin: 'Panthera tigris',
* desc: 'The largest cat species, weighing up to 306 kg (670 lb).'},
* {name: 'Roman snail', latin: 'Helix pomatia',
* desc: 'A species of large, edible, air-breathing land snail.'},
* {name: 'Yellow-winged darter', latin: 'Sympetrum flaveolum',
* desc: 'A dragonfly found in Europe and mid and Northern China.'},
* {name: 'Superb Fairy-wren', latin: 'Malurus cyaneus',
* desc: 'Common and familiar across south-eastern Australia.'}
* ]
* },
* columns: [{
* dataIndex: 'name',
* text: 'Common name',
* width: 125
* }, {
* dataIndex: 'latin',
* text: 'Scientific name',
* flex: 1
* }],
* features: [{
* ftype: 'rowbody',
* setupRowData: function(record, rowIndex, rowValues) {
* var headerCt = this.view.headerCt,
* colspan = headerCt.getColumnCount();
* // Usually you would style the my-body-class in CSS file
* return {
* rowBody: '<div style="padding: 1em">'+record.get("desc")+'</div>',
* rowBodyCls: "my-body-class",
* rowBodyColspan: colspan
* };
* }
* }]
* });
*/
Ext.define('Ext.grid.feature.RowBody', {
extend: 'Ext.grid.feature.Feature',
alias: 'feature.rowbody',
rowBodyCls: Ext.baseCSSPrefix + 'grid-row-body',
rowBodyHiddenCls: Ext.baseCSSPrefix + 'grid-row-body-hidden',
rowBodyTdSelector: 'td.' + Ext.baseCSSPrefix + 'grid-cell-rowbody',
eventPrefix: 'rowbody',
eventSelector: 'tr.' + Ext.baseCSSPrefix + 'grid-rowbody-tr',
tableTpl: {
before: function(values, out) {
var view = values.view,
rowValues = view.rowValues;
this.rowBody.setup(values.rows, rowValues);
},
after: function(values, out) {
var view = values.view,
rowValues = view.rowValues;
this.rowBody.cleanup(values.rows, rowValues);
},
priority: 100
},
extraRowTpl: [
'{%',
'values.view.rowBodyFeature.setupRowData(values.record, values.recordIndex, values);',
'this.nextTpl.applyOut(values, out, parent);',
'%}',
'<tr class="' + Ext.baseCSSPrefix + 'grid-rowbody-tr {rowBodyCls}">',
'<td class="' + Ext.baseCSSPrefix + 'grid-cell-rowbody' + '" colspan="{rowBodyColspan}">',
'<div class="' + Ext.baseCSSPrefix + 'grid-rowbody' + ' {rowBodyDivCls}">{rowBody}</div>',
'</td>',
'</tr>', {
priority: 100,
syncRowHeights: function(firstRow, secondRow) {
var owner = this.owner,
firstRowBody = Ext.fly(firstRow).down(owner.eventSelector, true),
secondRowBody,
firstHeight, secondHeight;
// Sync the heights of row body elements in each row if they need it.
if (firstRowBody && (secondRowBody = Ext.fly(secondRow).down(owner.eventSelector, true))) {
if ((firstHeight = firstRowBody.offsetHeight) > (secondHeight = secondRowBody.offsetHeight)) {
Ext.fly(secondRowBody).setHeight(firstHeight);
}
else if (secondHeight > firstHeight) {
Ext.fly(firstRowBody).setHeight(secondHeight);
}
}
},
syncContent: function(destRow, sourceRow) {
var owner = this.owner,
destRowBody = Ext.fly(destRow).down(owner.eventSelector, true),
sourceRowBody;
// Sync the heights of row body elements in each row if they need it.
if (destRowBody && (sourceRowBody = Ext.fly(sourceRow).down(owner.eventSelector, true))) {
Ext.fly(destRowBody).syncContent(sourceRowBody);
}
}
}
],
init: function(grid) {
var me = this,
view = me.view;
view.rowBodyFeature = me;
// If we are not inside a wrapped row, we must listen for mousedown in the body row to trigger selection.
// Also need to remove the body row on removing a record.
if (!view.findFeature('rowwrap')) {
grid.mon(view, {
element: 'el',
mousedown: me.onMouseDown,
scope: me
});
me.mon(grid.getStore(), 'remove', me.onStoreRemove, me);
}
view.headerCt.on({
columnschanged: me.onColumnsChanged,
scope: me
});
view.addTableTpl(me.tableTpl).rowBody = me;
view.addRowTpl(Ext.XTemplate.getTpl(this, 'extraRowTpl'));
me.callParent(arguments);
},
onStoreRemove: function(store, model, index){
var view = this.view,
node;
if (view.rendered) {
node = view.getNode(index);
if (node) {
node = Ext.fly(node).next(this.eventSelector);
if (node) {
node.remove();
}
}
}
},
// Needed when not used inside a RowWrap to select the data row when mousedown on the body row.
onMouseDown: function(e) {
var me = this,
tableRow = e.getTarget(me.eventSelector);
// If we have mousedowned on a row body TR and its previous sibling is a grid row, pass that onto the view for processing
if (tableRow && Ext.fly(tableRow = tableRow.previousSibling).is(me.view.getItemSelector())) {
e.target = tableRow;
me.view.handleEvent(e);
}
},
getSelectedRow: function(view, rowIndex) {
var selectedRow = view.getNode(rowIndex, false);
if (selectedRow) {
return Ext.fly(selectedRow).down(this.eventSelector);
}
return null;
},
// When columns added/removed, keep row body colspan in sync with number of columns.
onColumnsChanged: function(headerCt) {
var items = this.view.el.query(this.rowBodyTdSelector),
colspan = headerCt.getVisibleGridColumns().length,
len = items.length,
i;
for (i = 0; i < len; ++i) {
items[i].colSpan = colspan;
}
},
/**
* @method getAdditionalData
* Provides additional data to the prepareData call within the grid view.
* The rowbody feature adds 3 additional variables into the grid view's template.
* These are rowBodyCls, rowBodyColspan, and rowBody.
* @param {Object} data The data for this particular record.
* @param {Number} idx The row index for this record.
* @param {Ext.data.Model} record The record instance
* @param {Object} orig The original result from the prepareData call to massage.
*/
setupRowData: function(record, rowIndex, rowValues) {
if (this.getAdditionalData) {
Ext.apply(rowValues, this.getAdditionalData(record.data, rowIndex, record, rowValues));
}
},
setup: function(rows, rowValues) {
rowValues.rowBodyCls = this.rowBodyCls;
rowValues.rowBodyColspan = rowValues.view.getGridColumns().length;
},
cleanup: function(rows, rowValues) {
rowValues.rowBodyCls = rowValues.rowBodyColspan = rowValues.rowBody = null;
}
});
|
Download
