PDA

View Full Version : Grid Panel - PlugIn Rowexpander - nextBd is null



digitalwerker
8 Mar 2012, 5:57 AM
Hey!

I am relative new to ExtJS and currently working on a project using ExtJS 4.0.7.

I actually have a Grid Panel with the rowexpander PlugIn, where i try to fill the rowBodyTpl with static Text.

However when i load the page, consisting only a Grid Panel, it shows my data and all rows. But they are all opened and not consisting the static text i inserted. Additionally when i try clicking the expanded rows i do get following error:

Opened and trying to close => nextBd is null (nextBd.addCls(this.rowBodyHiddenCls);)
Closed and trying to open => nextBd is null (nextBd.removeCls(this.rowBodyHiddenCls);)

Anyone an idea how to fix this problem?

My Code:


Ext.define('positionOverview.view.ui.positionPanel', {
extend: 'Ext.grid.Panel',

store: 'positionStore',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: [
'<p><b>Company:</b> {isin}</p><br>',
'<p><b>Summary:</b> {anschaffungswert}</p>'
]
}],
width: 953,
columns: [
{
// xtype: 'gridcolumn',
dataIndex: 'isin',
flex: 3,
text: 'ISIN'
},
{
// xtype: 'gridcolumn',
dataIndex: 'name',
flex: 5,
text: 'Name'
},
{
// xtype: 'gridcolumn',
dataIndex: 'positionstand',
flex: 3,
text: 'Positionsstand',
renderer: Ext.util.Format.usMoney
},
{
// xtype: 'gridcolumn',
dataIndex: 'anschaffungswert',
flex: 3,
text: 'Anschaffungswert',
renderer: Ext.util.Format.usMoney
},
{
// xtype: 'gridcolumn',
dataIndex: 'buchwert',
flex: 3,
text: 'Buchwert',
renderer: Ext.util.Format.usMoney
},
{
// xtype: 'gridcolumn',
dataIndex: 'marktwert',
flex: 3,
text: 'Marktwert',
renderer: Ext.util.Format.usMoney
}
]
});

me.callParent(arguments);
}
});


I do have also another question! What i try to do with the row expander plugin is to insert 2 divs in the rowBodyTpl. Each of them will consist, on opening , a dynamic line Chart or another Grid Panel. Is this even possible?

Thank you guys in advance!

mitchellsimoens
8 Mar 2012, 5:05 PM
Try this:


Ext.define('positionOverview.view.ui.positionPanel', {
extend: 'Ext.grid.Panel',

store: 'positionStore',

plugins : [{
ptype: 'rowexpander',
rowBodyTpl: [
'<p><b>Company:</b> {isin}</p><br>',
'<p><b>Summary:</b> {anschaffungswert}</p>'
]
}],

initComponent: function() {
var me = this;

Ext.applyIf(me, {
width: 953,
columns: [
{
// xtype: 'gridcolumn',
dataIndex: 'isin',
flex: 3,
text: 'ISIN'
},
{
// xtype: 'gridcolumn',
dataIndex: 'name',
flex: 5,
text: 'Name'
},
{
// xtype: 'gridcolumn',
dataIndex: 'positionstand',
flex: 3,
text: 'Positionsstand',
renderer: Ext.util.Format.usMoney
},
{
// xtype: 'gridcolumn',
dataIndex: 'anschaffungswert',
flex: 3,
text: 'Anschaffungswert',
renderer: Ext.util.Format.usMoney
},
{
// xtype: 'gridcolumn',
dataIndex: 'buchwert',
flex: 3,
text: 'Buchwert',
renderer: Ext.util.Format.usMoney
},
{
// xtype: 'gridcolumn',
dataIndex: 'marktwert',
flex: 3,
text: 'Marktwert',
renderer: Ext.util.Format.usMoney
}
]
});

me.callParent(arguments);
}
});

It's possible to have a chart or grid under it but it's not the easiest. You are basically rendering a chart or grid into an element.

digitalwerker
9 Mar 2012, 4:03 AM
Hey!

Thank you very much for your quick answer! Works like charm ... going to figure out how to load the chart and grid into the row expander ;).

Greetings and many thanks from Austria!

Bobrovnik
22 Aug 2013, 1:47 AM
Hi

Can you please explain more in details why plugin does not work, if you add it inside initComponent?

zonaib
26 Aug 2013, 3:47 AM
i have a different scenario, i have to add form.Panel when my row is being clicked ...
is there any plugin which help to add panel when row expanded ???