1

我对 extjs 4 很陌生。我面临一个问题。希望有人能提供帮助。我有网格。我在该网格中添加了行扩展。这是我的代码：

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

});

我在第一列上展开。我想在第二列上添加展开图标。任何的想法？

4

1 回答 1

0

你必须扩展类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
});

PS 我还没有真正测试过 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;
    }
});
于 2013-05-07T21:30:48.540 回答