Header for RowExpander

[Spring]

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]

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]

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]

ExtJS versions: 2.1, 2.3

Using ExtJS 3.1.1 and works great.

[daiei27]

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]

any chance on updating this for ExtJS 4?

[vsahay]

This does not seem to work in chrome and safari