Add row expander for second column in grid - extjs4

Question

I am very new for extjs 4.I am facing one problem.Hope somebody will help. I am having grid.I have added row expand in that grid. Here is my code :

Ext.define('Citi.iv.view.portfolio.PositionsLiabilitiesGrid', {
extend : 'Ext.grid.Panel',
requires:['Ext.ux.RowExpander'],
alias : 'widget.positionsliabilitiesgrid',
headerHeight:80,
itemId : 'financialPositionsassetGrid',
margin: '0 0 10px 0',
flex : 1,
cls : 'grey_alt_grid',
scroll : 'vertical',
autoScroll: true,
emptyText : 'No Data Found',
plugins: [{
        ptype: 'rowexpander',
        rowBodyTpl : [
            '<p><b>Render data here</b></p><br>'

        ]
    }],
collapsible: true,
columns : [{
    header : 'Account Descriptions',
    flex : 1,
    xtype : 'gridcolumn',
    hideable: false,
    dataIndex : 'account_description'
}, {
    header : 'Account',
    flex : 1,
    xtype : 'gridcolumn',
    hideable: false,
    dataIndex : 'account'
}, {
    header : 'Amount You Own',
    flex : 1,
    xtype : 'gridcolumn',
    hideable: false,
    dataIndex :'amount_you_own',
}, {
    header : 'Interest Rate',
    flex : 1,
    xtype : 'gridcolumn',
    hideable: false,
    dataIndex : 'interest_rate'
}, {
    header : 'Next Payment',
    flex : 1,
    xtype : 'gridcolumn',
    hideable: false,
    dataIndex : 'next_payment'
}, {
    header : 'Payment Due Date',
    flex : 1,
    xtype : 'gridcolumn',
    hideable: false,
    dataIndex : 'payment_due_date'
}, {
    header : 'Interest Paid',
    flex : 1,
    xtype : 'gridcolumn',
    hideable: false,
    dataIndex : 'interest_paid'
}]

});

I am getting expand on 1st column.I want add the expand icon on second column. Any idea?

Answer 1

You have to extend the class Ext.ux.RowExpander. The code of this class has changed between version 4.1.0 and 4.1.1 of Ext (and has been included in the core in version 4.2 as Ext.grid.plugin.RowExpander).

Here's how to do it:

/**
 * A {@link Ext.ux.RowExpander} that can be positioned at any column.
 * 
 * @xtype rowexpanderat
 */
Ext.define('Rx.grid.RowExpanderAt', function() {
    var spec = {
        extend: 'Ext.ux.RowExpander'
        ,alias: 'plugin.rowexpanderat'

        /**
         * Index of the column of the row expander.
         * 
         * @cfg {Integer} [insertAt=0]
         */
        ,insertAt: 0

        /**
         * @inheritdoc
         *
         * Overridden to implement {@link #insertAt} config option.
         */
        ,addExpander: function(){
            var position = this.insertAt;
            this.grid.headerCt.insert(position, this.getHeaderConfig());
        }

        /**
         * @inheritdoc
         *
         * Overridden to span the row body on the row expander column too.
         */
        ,getRowBodyFeatureData: function() {
            var o = this.callParent(arguments);
            o.rowBodyColspan ++;
            return o;
        }

        /**
         * @inheritdoc
         *
         * Overridden to remove the special styling of the row expander column 
         * (i.e. the gray and the right border that would overflow over the r
         * ow body).
         */
        ,getHeaderConfig: function() {
            var o = this.callParent(arguments);
            o.renderer = function(value, metadata) {
                return '<div class="' 
                    + Ext.baseCSSPrefix 
                    + 'grid-row-expander">&#160;</div>';
            };
            return o;
        }
    };

    // Adapt if version is less than 4.1.1 
    if (Ext.getVersion().isLessThan('4.1.1')) {
        delete spec.addExpander;
        spec.init = function(grid) {
            this.callParent(arguments);

            // Columns have to be added in init (after columns has been used to create the
            // headerCt). Otherwise, shared column configs get corrupted, e.g., if put in the
            // prototype.
            grid.headerCt.insert(this.insertAt, this.getHeaderConfig());
            grid.on('render', this.bindView, this, {single: true});
        };
    } else if (Ext.getVersion().isGreaterThan('4.1.1')) {
        throw new Error('Unsupported');
    }

    return spec;
});

Then, you would use it this way, in your grid's config:

Ext.create('Ext.grid.Panel', {
    plugins: [{

        // instead of rowexpander
        ptype: 'rowexpanderat' 
        // position at which to insert, 0-based
        ,insertAt: 1 

        // other plugin configuration...
        ,rowBodyTpl : [
            '<p><b>Render data here</b></p><br>'

        ]
    }]

    // ... all your grid configuration
});

P.S. I haven't really tested the above code for Ext 4.1.0. If it doesn't work for you, use the following class instead:

Ext.define('Rx.grid.RowExpanderAt', {
    extend: 'Ext.ux.RowExpander'
    ,alias: 'plugin.rowexpanderat'

    ,insertAt: 0

    ,init: function(grid) {
        this.callParent(arguments);

        // Columns have to be added in init (after columns has been used to 
        // create the headerCt). Otherwise, shared column configs get corrupted, 
        // e.g., if put in the prototype.
        grid.headerCt.insert(this.insertAt, this.getHeaderConfig());
        grid.on('render', this.bindView, this, {single: true});
    }

    ,getRowBodyFeatureData: function() {
        var o = this.callParent(arguments);
        o.rowBodyColspan ++;
        return o;
    }

    ,getHeaderConfig: function() {
        var o = this.callParent(arguments);
        o.renderer = function(value, metadata) {
            return '<div class="' + Ext.baseCSSPrefix + 'grid-row-expander">&#160;</div>';
        };
        return o;
    }
});