Extending the RowExpander Plugin

[ricardolowe]

I update your code to use the store reader's id value instead of the literal 'id'

instead of

 beforeExpand: function(record, body, rowIndex){
               blah....
                       }else if(this.store && this.tpl && this.lazyRender){
                            blah... blah...
                            this.store.load({params: {id: record.id}});

..i do this...

 beforeExpand: function(record, body, rowIndex){
               blah....
                       }else if(this.store && this.tpl && this.lazyRender){
                            blah... blah...
                            var params = {};
                            params[this.store.reader.meta.id] = record.id;
                            this.store.load({params: params});

Perhaps there is a cleaner way to get the store's reader and its properties?

[wolf]

Only solution that comes to mind is to pass the datastore for a combobox and do <tpl for loop> over the data to build an HTML dropdown ( <select id={parentrow.id} > ), etc. That feels cheesy for some reason. Would rather use the Ext components.

I needed something similar. My solution is exactly that. In the tpl, I gave <input type=text id="customFIeld-row{rowIndex}-field1" >.

tpl : new Ext.XTemplate(
                // TODO maybe use form.Field.applyTo on these form input items on expand?
                'Account Code: <input type="text" id="customField-row{rowIndex}-field1" name="accountCode" value="{accountCode}" /><br>',
                'Product Code: <input type="text" id="customField-row{rowIndex}-field2" name="projectCode" value="{projectCode}" />'
            ) 

To get rowIndex I had to change RowExpander.getBodyContent().

// Also apply rowIndex in addition to record.data.
content = this.tpl.apply( Ext.apply( {rowIndex: index}, record.data ) ) 

I used the RowExpander with a store provided earlier in this thread.

        expander.on("render", function( pExpander, pRecord, pBody, pRowIndex, pStore, pRecords) {
                if ( ! this.expandingPanel ) {
                    this.expandingPanel = [];
                }
                
                    this.expandingPanel[pRowIndex] = new Ext.Panel(
                        {
                            // title: 'Custom Fields',
                            layout:'fit', 
                            // monitorResize: true,
                            // autoDestroy: false,
                            // height: 300,
                            items: [
                                {                                
                                    xtype: 'textfield',
                                    applyTo: 'customField-row' + pRowIndex + '-field1',
                                        fieldLabel: 'Account Code',

... 

I haven't quite worked out how to make the panel look good, that is, use the field labels, but it works for now. Still in progress...

I had gone the Panel.renderTo approach and used a div in the tpl, but the content disappeared after the 2nd expand on each row and the data would be lost.

[sshahdb]

Good Job, thanks for plugin - helped me alot

[hecules]

Hello,everybuddy:
I use the plugin in an pre-configured grid class. I found a bug: when I clicked the expander plugin, the icon changed but not content diplay. I inserted an alert into the remotemethod, I found that the remotemethod had been called. What happened? I check out the source code and maybe found the source of it. I fixed this bug with following code,perhaps it will help somebody.
By the way, I use this plugin by:

initComponent: function(){
        this.expander = new Ext.ux.RowExpander({
                    remoteDataMethod : this.getExpanderContent
        });
        Ext.apply(this, {
            store: this.ds,

            columns: [
                  this.expander,
                  ............
            ]
            ,plugins:[this.cellActions,this.expander]
       });
}


/*
 * Ext JS Library 2.0
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 *
 * MODIFIED: SGB [12.12.07]
 * Added support for a new config option, remoteDataMethod,
 * including getter and setter functions, and minor mods
 * to the beforeExpand and expandRow functions
 * lisihao: ****,this plugin has some bugs, so can't dispaly content when toggle the row.I fix it.RI!
 */

Ext.ux.RowExpander = function(config){
    Ext.apply(this, config);
    Ext.ux.RowExpander.superclass.constructor.call(this);

    if(this.tpl){
        if(typeof this.tpl == 'string'){
            this.tpl = new Ext.Template(this.tpl);
        }
        this.tpl.compile();
    }

    this.state = {};
    this.bodyContent = {};

    this.addEvents({
        beforeexpand : true,
        expand: true,
        beforecollapse: true,
        collapse: true
    });
};

Ext.extend(Ext.ux.RowExpander, Ext.util.Observable, {
    header: "",
    width: 20,
    sortable: false,
    fixed:true,
    dataIndex: '',
    id: 'expander',
    lazyRender : true,
    enableCaching: true,

    getRowClass : function(record, rowIndex, p, ds){
        p.cols = p.cols-1;
        var content = this.bodyContent[record.id];
        if(!content && !this.lazyRender){
            content = this.getBodyContent(record, rowIndex);
        }
        if(content){
            p.body = content;
        }
        return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
    },

    init : function(grid){
        this.grid = grid;

        var view = grid.getView();
        view.getRowClass = this.getRowClass.createDelegate(this);

        view.enableRowBody = true;

        grid.on('render', function(){
            view.mainBody.on('mousedown', this.onMouseDown, this);
        }, this);
    },

    getBodyContent : function(record, index){
        if(!this.enableCaching){
            return this.tpl.apply(record.data);
        }
        var content = this.bodyContent[record.id];
        if(!content){
            content = this.tpl.apply(record.data);
            this.bodyContent[record.id] = content;
        }
        return content;
    },
    // Setter and Getter methods for the remoteDataMethod property
    setRemoteDataMethod : function (fn){
        this.remoteDataMethod = fn;
    },

    getRemoteDataMethod : function (record, index){
        if(!this.remoteDataMethod){
            return;
        }
            return this.remoteDataMethod.call(this,record,index);
    },

    onMouseDown : function(e, t){
        if(t.className == 'x-grid3-row-expander'){
            e.stopEvent();
            var row = e.getTarget('.x-grid3-row');
            this.toggleRow(row);
        }
    },

    renderer : function(v, p, record){
        p.cellAttr = 'rowspan="2"';
        return '<div class="x-grid3-row-expander"> </div>';
    },

    beforeExpand : function(record, body, rowIndex){

        if(this.fireEvent('beforexpand', this, record, body, rowIndex) !== false){
            // If remoteDataMethod is defined then we'll need a div, with a unique ID,
            //  to place the content
            if(this.remoteDataMethod){
                this.tpl = new Ext.Template("<div id='remData" + rowIndex + "' class='rem-data-expand'><\div>");
            }
            if(this.tpl && this.lazyRender){
//                body.innerHTML = this.getBodyContent(record, rowIndex);
                body.innerHTML = '<div id="remData"' + rowIndex + '" class="rem-data-expand">'+this.getRemoteDataMethod(record, rowIndex)+'</div>';// >>>>>--- change here!!!
            }

            return true;
        }else{
            return false;
        }
    },

    toggleRow : function(row){
        if(typeof row == 'number'){
            row = this.grid.view.getRow(row);
        }
        this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
    },

    expandRow : function(row){
        if(typeof row == 'number'){
            row = this.grid.view.getRow(row);
        }
        var record = this.grid.store.getAt(row.rowIndex);
        var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
        if(this.beforeExpand(record, body, row.rowIndex)){
            this.state[record.id] = true;
            Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
               if(this.fireEvent('expand', this, record, body, row.rowIndex) !== false){
                //  If the expand event is successful then get the remoteDataMethod
                this.getRemoteDataMethod(record,row.rowIndex);
            }
        }
    },

    collapseRow : function(row){
        if(typeof row == 'number'){
            row = this.grid.view.getRow(row);
        }
        var record = this.grid.store.getAt(row.rowIndex);
        var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
        if(this.fireEvent('beforcollapse', this, record, body, row.rowIndex) !== false){
            this.state[record.id] = false;
            Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
            this.fireEvent('collapse', this, record, body, row.rowIndex);
        }
    }
});

[hecules]

thanks, i post the reply in incorrect style. You fix it!

[wolf]

ricardolowe was asking how to put Ext fields into the expanded row. I had the same requirement. I initially thought I had it solved but found problems. See here now the working solution which allows combo boxes, text boxes, etc in the expanded row content without using a Template. Just override a method to return Ext Panel items. The overridden method has access to the grid.store record of the row OR a record of a store passed in the config parm of RowExpander.

Here's the abstract class:

/**
*    RowExpander changed from RowExpander.js in the Ext examples and some ideas taken 
*    from the forum (http://extjs.com/forum/showthread.php?t=21017&page=3).
*
*    Override the createExpandingRowPanelItems function to make Ext expanded row content
*    (as opposed to using Ext.Template to make the expanded row content).
*
*    If config.store is passed in, pass a record for the row from that store instead 
*    of the grid store into the createExpandingRowPanelItems function.
*/
Ext.grid.RowExpander = function(config){
    Ext.apply(this, config);
    Ext.grid.RowExpander.superclass.constructor.call(this);

    this.state = {};

    this.addEvents({
        beforeexpand : true,
        expand: true,
        beforecollapse: true,
        collapse: true
    });
};

Ext.extend(Ext.grid.RowExpander, Ext.util.Observable, {
    header: "",
    width: 20,
    sortable: false,
    fixed:true,
    dataIndex: '',
    id: 'expander',
    lazyRender : true,
    enableCaching: true,

    getRowClass : function(record, rowIndex, rowParams, ds){
        // cols: The column count to apply to the body row's TD colspan attribute (defaults to the current column count of the grid).
        rowParams.cols = rowParams.cols-1; // make it the width of the whole row
        return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
    },

    init : function(grid){
        this.grid = grid;

        var view = grid.getView();
        view.getRowClass = this.getRowClass.createDelegate(this);

        view.enableRowBody = true;

        grid.on('render', function(){
            view.mainBody.on( 'mousedown', this.onMouseDown, this );
        }, this);
        
        // store
        grid.getStore().on("load", function(store, records, options){
            Ext.select('div.x-grid3-row-expanded').replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
            this.state = {};
            }, this);
            
        this.store.load(); // load here instead of in beforeExpand cuz that would wipe out additions to store
    },

    onMouseDown : function( e, t ) {
        if(t.className == 'x-grid3-row-expander'){
            e.stopEvent();
            var row = e.getTarget('.x-grid3-row');
            this.toggleRow(row);
        }
    },

    renderer : function(v, p, record){
        p.cellAttr = 'rowspan="2"';
        return '<div class="x-grid3-row-expander"> </div>';
    },

    beforeExpand : function(record, rowBody, rowIndex){
        var isContinue = true;
        if(this.fireEvent('beforeexpand', this, record, rowBody, rowIndex, this.store) !== false){
            if(rowBody.innerHTML == '' || !this.enableCaching) {
                this.createExpandingRowPanel( record, rowBody, rowIndex );
            }
        } else {
            isContinue = false;
        }
        
        return isContinue;
    },

    toggleRow : function(row){
        if(typeof row == 'number'){
            row = this.grid.view.getRow(row);
        }
        this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
    },

    expandRow : function(row){
        if(typeof row == 'number'){
            row = this.grid.view.getRow(row);
        }
        var record = this.grid.store.getAt(row.rowIndex);
        // if using additional store passed in config, pass record from it instead of from the grid store
        var recordToPass = this.store ? this.store.getAt(row.rowIndex) : record; 
        var rowBody = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
        if(this.beforeExpand(recordToPass, rowBody, row.rowIndex)){
            this.state[record.id] = true;
            Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
            this.fireEvent('expand', this, recordToPass, rowBody, row.rowIndex);
        }
    },

    collapseRow : function(row){
        if(typeof row == 'number'){
            row = this.grid.view.getRow(row);
        }
        var record = this.grid.store.getAt(row.rowIndex);
        // if using additional store passed in config, pass record from it instead of from the grid store
        var recordToPass = this.store ? this.store.getAt(row.rowIndex) : record; 
        var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
        if(this.fireEvent('beforcollapse', this, recordToPass, body, row.rowIndex) !== false){
            this.state[record.id] = false;
            Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
            this.fireEvent('collapse', this, recordToPass, body, row.rowIndex);
        }
    },
    
   createExpandingRowPanel: function( record, rowBody, rowIndex ) {
    
        // record.id is more stable than rowIndex for panel item's key; rows can be deleted.
        var panelItemIndex = record.id;
        // var panelItemIndex = rowIndex;
 
        // init array of expanding row panels if not already inited
        if ( !this.expandingRowPanel ) {
            this.expandingRowPanel = [];
        }
        
        // Add a new panel to the row body if not already there
        if ( !this.expandingRowPanel[panelItemIndex] ) {
            this.expandingRowPanel[panelItemIndex] = new Ext.Panel(
                {
                    // title: 'Custom Fields',
                    // layout:'fit', // this doesn't put the labels there
                    border: false,
                    bodyBorder: false,
                    layout:'form',
                    renderTo: rowBody,
                    items: this.createExpandingRowPanelItems( record, rowIndex )
                }
            );
        }
    },
    
    /**
    * Override this method to put Ext form items into the expanding row panel.
    * @return Array of panel items.
    */
    createExpandingRowPanelItems: function( record, rowIndex ) {
        var panelItems = [];
        
        return panelItems;
    }
    
}); 

[wolf]

FYI, in the code in that last post, the ext fields created by the createExpandingRowPanelItems() function are not created unless the row is expanded. But the store can contain the data from those ext fields if you do something like this in your ext field:

                        listeners: {
                        'change' : this.onChangeField,
                        scope: this
                    },
                    record: record,
                        fieldKey: 'myFieldKey', 

onChangeField: function( field, newValue, oldValue ) {
        // copy the new field value into the store
        field.record.set( field.fieldKey, newValue );
} 

Also, if you do row deletion, be careful of using "rowIndex"; the rowIndex for a row would change I made a change to createExpandingRowPanel() in the above post for this reason.

[nazextjs]

I am using a grid to display the data along with a RowExpander.
When the expand the row it does show the fields but without values which I really want to get to. The other issue is I want to learn how to override the createExpandingRowPanelItems function in the RowExpander class. I dont think I am doing it right.

// row expander
  var expander = new Ext.grid.RowExpander({
      store: store,
        createExpandingRowPanelItems: 
            function( record, rowIndex ) {
          var panelItems = [{
               id: 'form-row'+rowIndex,
            columnWidth: 0.4,
            xtype: 'fieldset',
            labelWidth: 90,
            //title:'Company details',
            defaults: {width: 140},    // Default config options for child items
            defaultType: 'textfield',
            autoHeight: true,
            bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
            border: false,
            style: {
              "margin-left": "10px", // when you add custom margin in IE 6...
              "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0"  // you have to adjust for it somewhere else
            },
            items: [{
              fieldLabel: 'Name',
              name: 'barcode'
            },{
              fieldLabel: 'Price',
              name: 'title'
            },{
              fieldLabel: '% Change',
              name: 'author'
            },{
              xtype: 'datefield',
              fieldLabel: 'Last Updated',
              name: 'barcode'
            }]    
          }];
          return panelItems;
          }
  });

[wolf]

http://extjs.com/learn/Manual:Intro:Inheritance

[RayZ]

Hello, im working with the RowExpander and i m trying to find how to nest two grid inside a master grid like this :
master grid
------------>slave grid
----------------> slave "slave" grid

but the deepest grid has a strange behavior : it does'nt collapse correctly
here is my code :

....  
  var iexpander = new Ext.grid.RowExpander({
                remoteDataMethod : detailedMovementGrid,
                tpl: new Ext.Template(
                    '<div id="subRemData"></div>')
            });
....

You're trying generate duplicate "slave" ID divs? It's might be wrong...?