Rowexpander plugin, howto animate the expand effect in Ext 6? - extjs

Question

I am wondering if someone know how to animate the expand effect of a rowbody in a gridpanel configured with the rowexpander plugin. I am looking for something like the expand/collapse panel effect. Thanks in advance.
{
ptype: 'rowexpander',
pluginId: 'rowExpanderPlugin',
selectRowOnExpand: true,
rowBodyTpl: new Ext.XTemplate(
'<div class="warning-notice" style="margin: 15px 10px 10px 10px; background-color: gold;"><div class="title">{asunto}</div>{[this.parseMensaje(values.mensaje, values.numero_expediente, values.id_expediente)]}</div>',
{
parseMensaje: function (v, num, idExpediente) {
return v.replace(num, Ext.String.format('{1} <i class="fa fa-external-link" aria-hidden="true"></i>', idExpediente, num));
}
}
)
}

Answer 1

Kindly check this example ExtJS Fiddle
, you can see the + and - sign which expand and collapse the panel
Ext.application({
name: 'Fiddle',
launch: function () {
let store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Grid',
renderTo: Ext.getBody(),
width: 600,
height: 400,
store: store,
plugins: {
ptype: 'rowexpander',
pluginId: 'rowExpanderPlugin',
selectRowOnExpand: true,
rowBodyTpl: new Ext.XTemplate(
'Name is {name}'
)
},
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email'
}, {
text: 'Phone',
dataIndex: 'phone'
}]
});
}
});