Плагин Rowexpander, как оживить эффект расширения в Ext 6?

Question

Мне интересно, знает ли кто-нибудь, как анимировать эффект расширения тела строки в сетке, настроенной с помощью плагина rowexpander.Я ищу что-то вроде эффекта расширения / свертывания панели.Заранее спасибо.

    {
        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('<a href="javascript://" data-qtip="Abrir expediente" style="font-weight: bold; " class="no-overflow-tooltip link" onclick="GN.app.openExp({0});">{1}</a>&nbsp;&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i>', idExpediente, num));
            }
        }
    )
}

Answer 1

Пожалуйста, проверьте этот пример ExtJS Fiddle , вы можете увидеть знак + и -, который разворачивает и сворачивает панель

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