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

Rowexpander插件，如何制作Ext 6中的扩展效果动画？

1 个答案: