Threaded View

  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

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