爲網格中的第二列添加行擴展器 - extjs4

Question

我對extjs很陌生4.我面臨一個問題。希望有人會幫助。 我有grid.I在該網格中添加了行擴展。 這是我的代碼：

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' 
}] 

}）;

我在第一列上展開。我想在第二列上添加展開圖標。任何想法？

Answer 1

您必須擴展類Ext.ux.RowExpander。該類的代碼在Ext的4.1.0和4.1.1版本之間發生了變化（並且已經包含在版本4.2的核心中，編號爲Ext.grid.plugin.RowExpander）。

這裏是如何做到這一點：

/** 
* 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; 
}); 

然後，你會使用這種方式，在網格的配置：

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 
}); 

附：我沒有真正測試Ext 4.1.0的上述代碼。如果它不適合 ，請改爲使用以下類：

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; 
    } 
});