3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
10 * @class Ext.ux.grid.RowExpander
11 * @extends Ext.util.Observable
12 * Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables
13 * a second row body which expands/contracts. The expand/contract behavior is configurable to react
14 * on clicking of the column, double click of the row, and/or hitting enter while a row is selected.
18 Ext.ux.grid.RowExpander = Ext.extend(Ext.util.Observable, {
20 * @cfg {Boolean} expandOnEnter
21 * <tt>true</tt> to toggle selected row(s) between expanded/collapsed when the enter
22 * key is pressed (defaults to <tt>true</tt>).
26 * @cfg {Boolean} expandOnDblClick
27 * <tt>true</tt> to toggle a row between expanded/collapsed when double clicked
28 * (defaults to <tt>true</tt>).
30 expandOnDblClick : true,
43 constructor: function(config){
44 Ext.apply(this, config);
49 * Fires before the row expands. Have the listener return false to prevent the row from expanding.
50 * @param {Object} this RowExpander object.
51 * @param {Object} Ext.data.Record Record for the selected row.
52 * @param {Object} body body element for the secondary row.
53 * @param {Number} rowIndex The current row index.
58 * Fires after the row expands.
59 * @param {Object} this RowExpander object.
60 * @param {Object} Ext.data.Record Record for the selected row.
61 * @param {Object} body body element for the secondary row.
62 * @param {Number} rowIndex The current row index.
66 * @event beforecollapse
67 * Fires before the row collapses. Have the listener return false to prevent the row from collapsing.
68 * @param {Object} this RowExpander object.
69 * @param {Object} Ext.data.Record Record for the selected row.
70 * @param {Object} body body element for the secondary row.
71 * @param {Number} rowIndex The current row index.
76 * Fires after the row collapses.
77 * @param {Object} this RowExpander object.
78 * @param {Object} Ext.data.Record Record for the selected row.
79 * @param {Object} body body element for the secondary row.
80 * @param {Number} rowIndex The current row index.
85 Ext.ux.grid.RowExpander.superclass.constructor.call(this);
88 if(typeof this.tpl == 'string'){
89 this.tpl = new Ext.Template(this.tpl);
95 this.bodyContent = {};
98 getRowClass : function(record, rowIndex, p, ds){
100 var content = this.bodyContent[record.id];
101 if(!content && !this.lazyRender){
102 content = this.getBodyContent(record, rowIndex);
107 return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
110 init : function(grid){
113 var view = grid.getView();
114 view.getRowClass = this.getRowClass.createDelegate(this);
116 view.enableRowBody = true;
119 grid.on('render', this.onRender, this);
120 grid.on('destroy', this.onDestroy, this);
124 onRender: function() {
125 var grid = this.grid;
126 var mainBody = grid.getView().mainBody;
127 mainBody.on('mousedown', this.onMouseDown, this, {delegate: '.x-grid3-row-expander'});
128 if (this.expandOnEnter) {
129 this.keyNav = new Ext.KeyNav(this.grid.getGridEl(), {
130 'enter' : this.onEnter,
134 if (this.expandOnDblClick) {
135 grid.on('rowdblclick', this.onRowDblClick, this);
140 onDestroy: function() {
142 this.keyNav.disable();
146 * A majority of the time, the plugin will be destroyed along with the grid,
147 * which means the mainBody won't be available. On the off chance that the plugin
148 * isn't destroyed with the grid, take care of removing the listener.
150 var mainBody = this.grid.getView().mainBody;
152 mainBody.un('mousedown', this.onMouseDown, this);
156 onRowDblClick: function(grid, rowIdx, e) {
157 this.toggleRow(rowIdx);
160 onEnter: function(e) {
162 var sm = g.getSelectionModel();
163 var sels = sm.getSelections();
164 for (var i = 0, len = sels.length; i < len; i++) {
165 var rowIdx = g.getStore().indexOf(sels[i]);
166 this.toggleRow(rowIdx);
170 getBodyContent : function(record, index){
171 if(!this.enableCaching){
172 return this.tpl.apply(record.data);
174 var content = this.bodyContent[record.id];
176 content = this.tpl.apply(record.data);
177 this.bodyContent[record.id] = content;
182 onMouseDown : function(e, t){
184 var row = e.getTarget('.x-grid3-row');
188 renderer : function(v, p, record){
189 p.cellAttr = 'rowspan="2"';
190 return '<div class="x-grid3-row-expander"> </div>';
193 beforeExpand : function(record, body, rowIndex){
194 if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
195 if(this.tpl && this.lazyRender){
196 body.innerHTML = this.getBodyContent(record, rowIndex);
204 toggleRow : function(row){
205 if(typeof row == 'number'){
206 row = this.grid.view.getRow(row);
208 this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
211 expandRow : function(row){
212 if(typeof row == 'number'){
213 row = this.grid.view.getRow(row);
215 var record = this.grid.store.getAt(row.rowIndex);
216 var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
217 if(this.beforeExpand(record, body, row.rowIndex)){
218 this.state[record.id] = true;
219 Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
220 this.fireEvent('expand', this, record, body, row.rowIndex);
224 collapseRow : function(row){
225 if(typeof row == 'number'){
226 row = this.grid.view.getRow(row);
228 var record = this.grid.store.getAt(row.rowIndex);
229 var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
230 if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){
231 this.state[record.id] = false;
232 Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
233 this.fireEvent('collapse', this, record, body, row.rowIndex);
238 Ext.preg('rowexpander', Ext.ux.grid.RowExpander);
241 Ext.grid.RowExpander = Ext.ux.grid.RowExpander;