如何隐藏/删除操作列项目？

Question

我在网格视图中 hide/remove 操作列项目记录条件有问题。让我们看看下面的代码。有我做的动作栏代码。我想隐藏图像中显示的删除图标。此删除图标 hide/remove 处于记录状态。

{
    xtype: 'actioncolumn',
    flex: 1,
    align: 'center',
    scope: this,
    renderer: function (n, t, rec) {
        /*  if (rec.get('companyId') == 23) {
            console.log('Distributor Account List');
        }
        else {
            console.log('Distributor Client user List');
        } */
    },
    items: [
        {
            icon: FLEET_SERVER_URL + 'images/edit2.png',
            tooltip: fleet.Language.get('_FLEET_USER_USERLIST_EDIT_'),
            handler: function (grid, rowIndex, colIndex) {
                var rec = grid.getStore().getAt(rowIndex);
                this.fireEvent('showUserDetails', rec);
            }
        },
        {
            xtype: 'spacer'
        },
        {
            icon: (Ext.getStore('userStore').first().get('issuperadmin') == 1 || Ext.getStore('userStore').first().get('isadmin') == 1 || Ext.getStore('userStore').first().get('isadmin') == 3) ?
            FLEET_SERVER_URL + 'images/vehicles/van-icon.png' : '',  // Use a URL in the icon config
            tooltip: fleet.Language.get('_FLEET_USER_USERLIST_VEHICLE_'),
            handler: function (grid, rowIndex, colIndex) {
                var rec = grid.getStore().getAt(rowIndex);
                this.fireEvent('assignvehicles', rec);
            }
        },
        {
            xtype: 'spacer'
        },
        {
            icon: FLEET_SERVER_URL + 'images/del.png',
            tooltip: fleet.Language.get('_FLEET_USER_USERLIST_DELETE_'),
            handler: function (grid, rowIndex, colIndex) {
                Me = this;
                var rec = grid.getStore().getAt(rowIndex);
                Ext.Msg.show({
                    title: fleet.Language.get('_FLEET_USER_USERLIST_REMOVETITLE_'),
                    msg: fleet.Language.get('_FLEET_USER_USERLIST_REMOVEMSG_'),
                    buttons: Ext.Msg.YESNO,
                    icon: Ext.Msg.QUESTION,
                    callback: function (button) {
                        if (button == fleet.Language.get('_FLEET_USER_USERLIST_YESBTN_')) {
                            Me.removeUser(rec);
                        }
                    }
                });
            }
        }
    ]
}

操作列中有 4 个项目（编辑图标、间隔符、间隔符和删除图标），请参阅附图。

在上面的代码中有 Action 列渲染事件。例如我想查看公司 ID=23 的记录。我使用此条件进行测试。主要问题是我想在条件下隐藏删除图标。对此有什么合适的解决方案吗？

Answer 1

你想做的不是用icon属性，而是想把图标放到CSS中相应的class里。例如

.someIcon {
     background-image: path/to/icon.png no-repeat center center !important;
     width:20px;
     height:20px;
}

然后您可以添加 getClass 配置而不是图标配置，并根据需要提供 CSS classes，例如如果你想打开或关闭图标：

getClass: function(v, meta, rec) {
    if(rec.get('companyId')==23) return 'someIcon';
    else return '';
}

或者，如果您想要不同的图标，例如：

getClass: function(v, meta, rec) {
    if(rec.get('isImportant')) return 'redIcon';
    else return 'greyIcon';
}

请注意，如果您通过 SCSS 添加 classes，您必须在 Sencha Cmd 中重新编译您的项目。

如何隐藏/删除操作列项目？

How to hide/ Remove action columns Item?

javascript

extjs

sencha-touch

extjs4