PDA

View Full Version : expandbody event of rowexpander plugin



AJAIN32
16 Jul 2015, 12:52 PM
Hi,

I am using one grid row expander plugin for a grid. which has an event "expandbody", whenever it is fired on click of row expander with respect to grid's view, we get rowNode, record & expandRow parameters.

can anybody please tell me if i am firing this event explicitly by code, how can i get the rowNode and expandRow variable data ?
As per sencha docs it is some html element, and if the event is fired correctly with the grid's view - these variable should be present. i am firing the event by -

var dataRecord = grid.getStore().data.items[0] // for example i want to expand first row
grid.getView().fireEvent('expandbody', grid, dataRecord);

i am getting the record parameter, but not sure how can i get the rowNode & expandRow parameter. Please suggest.

Thanks,
Ankit

jdkhamba
17 Jul 2015, 3:06 AM
expandbody event already has all the parameters you need.

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.grid.plugin.RowExpander-event-expandbody

There is no need to pass extra parameters such as grid and dataRecord.

Just do :


grid.getView().fireEvent('expandbody')


The handler function that is listening to this event will automatically get all those parameters

AJAIN32
17 Jul 2015, 6:13 AM
Hi,

expandRow parameter is coming null, if you fire the event without passing anything.

Thanks,
Ankit

jdkhamba
17 Jul 2015, 8:51 AM
I am not sure how you are using the expander plugin. This seems to work:


var simpsonData = [];
for(var i =0;i<5;i++)
{
simpsonData.push({ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" });

}
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':simpsonData
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});


var simpsonPanel = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
forceFit:true,
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email' },
{ text: 'Phone', dataIndex: 'phone' }
],
plugins: [{
ptype: 'rowexpander',
rowBodyTpl : [
'<b>Email:</b> {email}'
]
}]
});
simpsonPanel.getView().on('expandbody', function(rowNode, record, expandRow, eOpts){
console.log(rowNode);
console.log(record);
console.log(expandRow);
console.log(eOpts);
});
Ext.application({
name : 'Fiddle',

launch : function() {
Ext.create('Ext.container.Viewport', {
layout: {
type: 'fit'

},
items: simpsonPanel

});
}
});

AJAIN32
17 Jul 2015, 8:58 AM
Thanks,

Yes it is working, As i understood from the code you are registering the expandbody event and the parameters are coming when that event is fired.

I have a situation where i need to create two views and have to show the second view as it is for first view. In first view everything works fine, events are working as expected.
when i am trying to create another instance of the same view, i am trying to fire this events for some rows and in that case i am not getting the variables to use.

It's also difficult to show this on fiddler, i will give it a try.

Please suggest !!!

Thanks,
Ankit

jdkhamba
17 Jul 2015, 9:49 AM
Hmmmm sounds complicated. Maybe something like this:?

https://fiddle.sencha.com/#fiddle/qn0

AJAIN32
17 Jul 2015, 10:42 AM
Thanks for the good example,

Is this possible to have grid1 only and dynamically i am creating instace of grid 2 (with the same store or different store having same data) and when i have expanded any record in grid1, and if i click on a button, i want the second grid to be populated(it is working) but the data is not coming in the same way as looks on grid1 (expanded rows).

so is there any way to capture the expanded row info with data in a store so that it can be used in other grid also ? or is there any way to perform the same functionality on grid 2, but both should be independent.
I tried getting the expanded row of grid 1 and explicitly expand those by toggleRow() method in grid 2, but internal id's of both the grid records are coming different so no way to link it.
Any suggestion ?

Thanks,
Ankit

jdkhamba
17 Jul 2015, 10:45 AM
Please post a fiddle of what you have so far before any one can help u further.

AJAIN32
23 Jul 2015, 11:56 AM
Thanks for the fiddle you provided,

I tried but not able to reproduce my problem in Js fiddle, In the code i am trying to open a new window and inside that window referring the same grid with different store, and i want to explicitly call the expand functionality to show the expanded contents.
If i explicitly click on the expand icon then it is appending with the expanded panel but when i am trying to call the toggleRow method with passing 0 as index and the record. It is not showing the expanded part of the row. I have tried updating the layout but no luck.

Any idea or certain way to expand the row explicitly in which it shows the expanded part also.

Thanks,
Ankit

AJAIN32
30 Jul 2015, 5:10 PM
I am not able to reproduce the issue in fiddle.

can anyone please suggest how can we add some html content (container) below the row of a grid without the row expander plugin ?

I am getting the reference of row from rowExpand parameter and i am trying to generate the some Html just below the row by -
expandRow.parentNode.insertRow('some HTML') or by
expandRow.parentNode.insertRow(expandRow) // trying to clone the row to see if the same row appears twice in the grid but its not working.

can anyone please suggest something ?

Thanks,
Ankit