PDA

View Full Version : Header for RowExpander



Spring
25 Feb 2010, 7:19 AM
Description: This is a header button for RowExpander that collapse/expand all rows.
May be, this code will be useful to someone. I haven't find it in forum yet.

Browsers Support: Firefox 3.5 and Internet Explorer 7
ExtJS versions: 2.1, 2.3



var xg = Ext.grid;
var expander = new xg.RowExpander({
header: '<div class="x-grid3-hd-row-expander" style="display:inline;padding-left:18px;"> </div>',
/**
* Override initi function to add on header click behavior
*/
init : xg.RowExpander.prototype.init.createSequence(function(grid) {
grid.on('render', function() {
// add on header click behavior
Ext.fly(grid.getView().innerHd).on('mousedown', this.onHdMouseDown, this);
grid.getStore().on('load', function() {
var hdEl = Ext.fly(grid.getView().innerHd).child('div.x-grid3-hd-expander');
if (hdEl.hasClass('x-grid3-hd-expanded')) {
hdEl.replaceClass('x-grid3-hd-expanded', 'x-grid3-hd-collapsed');
}
}, this);
}, this);
}),
// process on header click event
onHdMouseDown : function(e, t) {
if (t.className == 'x-grid3-hd-row-expander') {
e.stopEvent();
var hd = Ext.fly(t.parentNode);
var isChecked = hd.hasClass('x-grid3-hd-expanded');
if (isChecked) {
hd.replaceClass('x-grid3-hd-expanded', 'x-grid3-hd-collapsed');
this.collapseAll();
} else {
hd.replaceClass('x-grid3-hd-collapsed', 'x-grid3-hd-expanded');
this.expandAll();
}
}
},
/**
* Expand all rows
*/
expandAll : function() {
for (var i = 0; i < this.grid.getStore().getCount(); i++) {
this.expandRow(i);
}
},
/**
* Collapse all rows
*/
collapseAll : function() {
for (var i = 0; i < this.grid.getStore().getCount(); i++) {
this.collapseRow(i);
}
},
tpl : new Ext.Template(
'<p><b>Company:</b> {company}</p><br>',
'<p><b>Summary:</b> {desc}</p>'
)
});


CSS stylesheet:



.x-grid3-hd-row-expander{width:100%;height:13px;background-position:0 0;background-repeat:no-repeat;background-color:transparent;background-image:url(../../resources/images/default/grid/row-expand-sprite.gif);}
.x-grid3-hd-collapsed .x-grid3-hd-row-expander{background-position:0 0 !important;}
.x-grid3-hd-expanded .x-grid3-hd-row-expander{background-position:-25px 0!important;}


This example has taken from "GridView3 Example"

daiei27
15 Mar 2010, 7:13 AM
Few extensions you can just copy/paste and get them to work first time! (Ok, second. CSS rule with URL to background image assumes the CSS was put in ExtJS's css dir.) Still only took a minute though. Works on mixed row expansions as well. Thanks!

This will also help me figure out how to make the collapse/expand functionality happen when clicking any part of a specific row, not just the tiny +/- signs. Please respond if any of you know how to do this already!

daiei27
15 Mar 2010, 7:25 AM
The header +/- sign is not exactly lined up with the ones below it so I added the margin-left style as seen below.

header: '<div class="x-grid3-hd-row-expander" style="display:inline;padding-left:18px;margin-left: -1px;"> </div>',

Always leery of using neg. values, but it appears to work in FF 3.5 and IE 8.

daiei27
15 Mar 2010, 7:40 AM
ExtJS versions: 2.1, 2.3
Using ExtJS 3.1.1 and works great.

daiei27
15 Mar 2010, 10:25 AM
This will also help me figure out how to make the collapse/expand functionality happen when clicking any part of a specific row, not just the tiny +/- signs. Please respond if any of you know how to do this already!
Nevermind. In looking into how to implement this, I discovered double-clicking anywhere on the row/expanded area does the trick. :)

jej2003
22 Oct 2011, 1:07 PM
any chance on updating this for ExtJS 4?

vsahay
14 Feb 2012, 10:06 AM
This does not seem to work in chrome and safari:-?