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

2exbekwf  于 2022-11-23  发布在  其他
关注(0)|答案(1)|浏览(133)

在ExtJS Modern 6.2中,如何向一个网格单元格添加多个按钮?
我似乎有使用widgetcell的例子,但这似乎只适用于一个按钮。
我想做的是有2个按钮,其中一个总是隐藏取决于行中的值。

tzdcorbm

tzdcorbm1#

您可以使用段按钮作为小部件:

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

相关问题