我对extjs很新。我面临一个问题。希望有人会帮忙。 我有网格。我在该网格中添加了行扩展。 这是我的代码:
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'
}]
});
我正在扩展第一列。我想在第二列添加展开图标。有什么想法吗?
答案 0 :(得分:0)
您必须扩展课程Ext.ux.RowExpander
。这个类的代码在Ext的4.1.0和4.1.1之间已经发生了变化(并且已经作为Ext.grid.plugin.RowExpander
包含在4.2版的核心中。)
以下是如何操作:
/**
* 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"> </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
});
P.S。我还没有真正测试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"> </div>';
};
return o;
}
});