extjs - EXTJS 有条件地隐藏图标

Question

我有一个 EXTJS 网格，其中包含 2 个仅带有图标的操作列。如果 IsApproved = true，如何设置渲染器以隐藏图标？我试过 this.columns[0].items[0].icon = ''; 但得到 this.columns 的错误未定义。

columns: [
                    { header: 'Name', dataIndex: 'Name', flex: 1 },
                    { header: 'Login', dataIndex: 'Login', flex: 1 },
                    { header: 'Registered', dataIndex: 'RegisteredOn', flex: 1 },
                    { header: 'Invited', dataIndex: 'InvitationSent', flex: 1 },
                    { xtype: 'actioncolumn',
                        width: 40,
                        header: 'Invite',
                        tdCls: 'clickable',
                        renderer: function (value, metadata, record) {
                            if (record.get('IsApproved')) {
                               //HIDE ICON
                            } else {
                                //SHOW ICON
                            }
                        },
                        items: [{
                            icon: '/images/icon_email.png',
                            tooltip: 'Invite',
                            scope: this,
                            handler: this.inviteClick
                        }]
                    },
                    { xtype: 'actioncolumn', width: 40, header: 'Edit', tdCls: 'clickable', items: [{
                        icon: '/images/pencil.png',
                        tooltip: 'Edit',
                        scope: this,
                        handler: this.editClick
                    }]
                    }
                ],

Answer 1

试试我的方法 - 如果您的条件为真，那么您将图标放在单元格中，在其他情况下，您不会：

                {
                    xtype: 'actioncolumn',
                    width: 70,
                    align: 'center',
                    dataIndex: 'yourDataIndex',
                    menuDisabled: 'true',
                    text: 'sometext',
                    sortable: false,
                    fixed: 'true',
                    renderer: function (value, metadata, record) {
                        if (record.get('IsApproved')) {
                            metadata.tdCls = 'mycss'
                        }
                    }
                }

并为您的情况添加 css：

.mycss {
    background-position:center  !important;
    width: auto !important;
    background-repeat: no-repeat;
    background-image: url("yourIcon.png") !important; 
}