ExtJS Modern - 向网格单元添加多个按钮

Question

在 ExtJS Modern 6.2 中，如何向网格单元格添加多个按钮？

我似乎有使用widgetcell示例，但这似乎只适用于单个按钮。

我想要做的是有 2 个按钮，其中一个总是根据行中的值隐藏。

Answer 1

您可以将分段按钮用作小部件：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var store = Ext.create('Ext.data.Store', {
            fields: ['name', 'email', 'phone', 'homeHidden'],
            data: [{
                'name': 'Lisa',
                "email": "lisa@simpsons.com",
                "phone": "555-111-1224",
                "homeHidden": true
            }, {
                'name': 'Bart',
                "email": "bart@simpsons.com",
                "phone": "555-222-1234",
                "homeHidden": false
            }, {
                'name': 'Homer',
                "email": "home@simpsons.com",
                "phone": "555-222-1244",
                "homeHidden": true
            }, {
                'name': 'Marge',
                "email": "marge@simpsons.com",
                "phone": "555-222-1254",
                "homeHidden": false
            }]
        });

        Ext.create('Ext.grid.Grid', {
            title: 'Simpsons',
            itemConfig: {
                viewModel: true
            },
            rowViewModel: true,
            store: store,
            columns: [{
                text: 'Tool',
                cell: {
                    xtype: 'widgetcell',
                    widget: {
                        xtype: 'segmentedbutton',
                        allowToggle: false,
                        items: [{
                            iconCls: 'x-fa fa-home',
                            bind: {
                                hidden: '{record.homeHidden}'
                            },
                            handler: function (btn, evt) {
                                const record = btn.up('widgetcell').getRecord();
                                console.log("Button Home", record.getData());

                            }
                        }, {
                            iconCls: 'x-fa fa-user',
                            handler: function (btn) {
                                const record = btn.up('widgetcell').getRecord();
                                console.log("Button User", record.getData());
                            }
                        }]
                    }
                }
            }, {
                text: 'Name',
                dataIndex: 'name',
                width: 200
            }, {
                text: 'Email',
                dataIndex: 'email',
                width: 250
            }, {
                text: 'Phone',
                dataIndex: 'phone',
                width: 120
            }],
            layout: 'fit',
            fullscreen: true
        });
    }
});