Add row expander for second column in grid - extjs4 -

i new extjs 4.i facing 1 problem.hope help. having grid.i have added row expand in grid. here 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 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 getting expand on 1st column.i want add expand icon on second column. idea?

you have extend class ext.ux.rowexpander. code of class has changed between version 4.1.0 , 4.1.1 of ext (and has been included in core in version 4.2 ext.grid.plugin.rowexpander).

here's how it:

/**  * {@link ext.ux.rowexpander} can positioned @ column.  *   * @xtype rowexpanderat  */ ext.define('rx.grid.rowexpanderat', function() {     var spec = {         extend: 'ext.ux.rowexpander'         ,alias: 'plugin.rowexpanderat'          /**          * index of column of row expander.          *           * @cfg {integer} [insertat=0]          */         ,insertat: 0          /**          * @inheritdoc          *          * overridden implement {@link #insertat} config option.          */         ,addexpander: function(){             var position = this.insertat;             this.grid.headerct.insert(position, this.getheaderconfig());         }          /**          * @inheritdoc          *          * overridden span row body on row expander column too.          */         ,getrowbodyfeaturedata: function() {             var o = this.callparent(arguments);             o.rowbodycolspan ++;             return o;         }          /**          * @inheritdoc          *          * overridden remove special styling of row expander column           * (i.e. gray , right border overflow on 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 less 4.1.1      if (ext.getversion().islessthan('4.1.1')) {         delete spec.addexpander;         spec.init = function(grid) {             this.callparent(arguments);              // columns have added in init (after columns has been used create             // headerct). otherwise, shared column configs corrupted, e.g., if put in             // 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, use way, in grid's config:

ext.create('ext.grid.panel', {     plugins: [{          // instead of rowexpander         ptype: 'rowexpanderat'          // position @ insert, 0-based         ,insertat: 1           // other plugin configuration...         ,rowbodytpl : [             '<p><b>render data here</b></p><br>'          ]     }]      // ... grid configuration }); 

p.s. haven't tested above code ext 4.1.0. if doesn't work you, use 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 added in init (after columns has been used          // create headerct). otherwise, shared column configs corrupted,          // e.g., if put in 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;     } });