1. #1
    Ext User
    Join Date
    Oct 2008
    Posts
    41
    Vote Rating
    0
    Spring is on a distinguished road

      0  

    Default Header for RowExpander

    Header for RowExpander


    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

    Code:
        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:

    Code:
         .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"
    Attached Images

  2. #2
    Sencha User
    Join Date
    Mar 2010
    Posts
    83
    Vote Rating
    -1
    daiei27 is an unknown quantity at this point

      0  

    Thumbs up Excellent!

    Excellent!


    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!

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    83
    Vote Rating
    -1
    daiei27 is an unknown quantity at this point

      0  

    Default Layout

    Layout


    The header +/- sign is not exactly lined up with the ones below it so I added the margin-left style as seen below.
    Code:
    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.

  4. #4
    Sencha User
    Join Date
    Mar 2010
    Posts
    83
    Vote Rating
    -1
    daiei27 is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by Spring View Post
    ExtJS versions: 2.1, 2.3
    Using ExtJS 3.1.1 and works great.

  5. #5
    Sencha User
    Join Date
    Mar 2010
    Posts
    83
    Vote Rating
    -1
    daiei27 is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by daiei27 View Post
    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.

  6. #6
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    104
    Vote Rating
    0
    jej2003 is on a distinguished road

      0  

    Default


    any chance on updating this for ExtJS 4?

  7. #7
    Sencha User
    Join Date
    Dec 2011
    Posts
    1
    Vote Rating
    0
    vsahay is on a distinguished road

      0  

    Exclamation Doesnt work in Chrome and Safari

    Doesnt work in Chrome and Safari


    This does not seem to work in chrome and safari

Thread Participants: 3

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar