Question

我想在条件中隐藏操作列项，请查看下面的代码。

{
 xtype: 'actioncolumn',
 flex: 1,
 sortable: false,
 menuDisabled: true,
 align: 'center',
 items: [{

     icon: (fleet.rolerightscreate.modulerights('Editmanagevehicle', 'Manage Vehicle', 'E') != null) ? FLEET_SERVER_URL + 'images/edit2.png' : '',
     tooltip: fleet.Language.get('_FLEET_VEHICLE_VEHICLELIST_EDIT_'),
     scope: this,

     handler: function(grid, rowIndex, colIndex) {

         //var data = Vehiclestore.data.items[rowIndex].data;
         var rec = grid.getStore().getAt(rowIndex);
         console.log(rec);
         if (fleet.rolerightscreate.modulerights('Editmanagevehicle', 'Manage Vehicle', 'E') != null) {
             this.fireEvent("ShowVehicleDetails", rec);
         }
     }
 }, {
     xtype: 'spacer'
 }, {
     icon: (Ext.getStore('userStore').first().get('issuperadmin') == 1 ? FLEET_SERVER_URL + 'images/del.png' : ''),
     //(fleet.rolerightscreate.modulerights('Deletemanagevehicle', 'Manage Vehicle', 'D') != null) ? FLEET_SERVER_URL + 'images/del.png' : '',  // Use a URL in the icon config  

     tooltip: fleet.Language.get('_FLEET_VEHICLE_VEHICLELIST_DELETE_'),
     handler: function(grid, rowIndex, colIndex) {
         var rec = grid.getStore().getAt(rowIndex);
         if (fleet.rolerightscreate.modulerights('Deletemanagevehicle', 'Manage Vehicle', 'D') != null) {
             Ext.Msg.show({
                 title: fleet.Language.get('_FLEET_VEHICLE_VEHICLELIST_REMOVETITLE_'),
                 msg: fleet.Language.get('_FLEET_VEHICLE_VEHICLELIST_REMOVEMSG_'),
                 buttons: Ext.Msg.YESNO,
                 icon: Ext.Msg.QUESTION,
                 callback: function(button) {
                     if (button == fleet.Language.get('_FLEET_VEHICLE_VEHICLELIST_YESBTN_')) {
                         me.removeVehicle(rec);
                     }
                 }
             });
         }
     }
 }]
}

在上面的代码中，“操作”列包含3个项目，编辑，空格（即{xtype：'spacer'}），和删除图标。我想在条件下隐藏删除图标。表示删除选项仅在管理员用户登录时显示。请看这个设计，你可以更好地了解问题

使用此代码，我可以隐藏删除图标，但单击隐藏的图标位置时，工具提示和点击事件仍会激活。

icon: (Ext.getStore('userStore').first().get('issuperadmin') == 1 ? FLEET_SERVER_URL + 'images/del.png' : ''),

Answer 1

我想也许你想隐藏和隐藏模式。 http://docs.sencha.com/extjs/6.2.0/classic/Ext.grid.column.Action.html#cfg-hidden http://docs.sencha.com/extjs/6.2.0/classic/Ext.grid.column.Action.html#cfg-hideMode

注意：未经测试

{
     xtype: 'actioncolumn',
     flex: 1,
     sortable: false,
     menuDisabled: true,
     align: 'center',
     items: [{

     // add the type of rendering method you want
     hideMode: 'display',

     // do permissions check here
     hide: fleet.rolerightscreate.modulerights('Editmanagevehicle', 'Manage Vehicle', 'E') != null) ? true : false,

     icon:(fleet.rolerightscreate.modulerights('Editmanagevehicle', 'Manage Vehicle', 'E') != null) ? FLEET_SERVER_URL + 'images/edit2.png' : '',
     tooltip: fleet.Language.get('_FLEET_VEHICLE_VEHICLELIST_EDIT_'),
     scope: this,
     handler: function(grid, rowIndex, colIndex) {
       //var data = Vehiclestore.data.items[rowIndex].data;
       var rec = grid.getStore().getAt(rowIndex);
       console.log(rec);
       if (fleet.rolerightscreate.modulerights('Editmanagevehicle', 'Manage Vehicle', 'E') != null) {
         this.fireEvent("ShowVehicleDetails", rec);
        }
      }
     }

Answer 2

我不认为隐藏或禁用图标是这里的解决方案。如果用户不是管理员，为什么还要添加图标呢。我会buildActionColumnItems方法根据当前用户的角色返回操作列的项目。

操作列配置：

{
    xtype: 'actioncolumn',
    flex: 1,
    sortable: false,
    menuDisabled: true,
    align: 'center',
    items: this.buildActionColumnItems()
}

buildActionColumnItems方法实现：

buildActionColumnItems: function () {
    //set the implicit items
    var columnItems = [{
        icon: (fleet.rolerightscreate.modulerights('Editmanagevehicle', 'Manage Vehicle', 'E') != null) ? FLEET_SERVER_URL + 'images/edit2.png' : '',
        tooltip: fleet.Language.get('_FLEET_VEHICLE_VEHICLELIST_EDIT_'),
        ...
    }];

    //add aditional items if the user is super admin
    if (Ext.getStore('userStore').first().get('issuperadmin') == 1) {
        columnItems.push({
            xtype: 'spacer'
        });
        columnItems.push({
            icon: FLEET_SERVER_URL + 'images/del.png',
            tooltip: fleet.Language.get('_FLEET_VEHICLE_VEHICLELIST_DELETE_'),
            ...
        });
    }

    return columnItems;
}

Answer 3

您可以在同一个对象中使用getClass方法

handler: function(grid, rowindex, cellIndex, a, e, record, tr) {
    if (condition)
       {
        //some logic
       }
    },
getTip: function(v, meta, rec) {
     if (condition) {
         return '';
     } else {
         return 'ToolTip';
     }
    }
getClass: function(v, meta, rec) {
   if (condition) {
                return '';
        } else {
                return 'co-delete-ico';
        }
 }

希望这有帮助

Answer 4

而不是隐藏使用isDisabled（）方法。

要使用该方法必须在actioncolumn本身。

    isDisabled: function (grid, rowIndex, colIndex, items, record) {
        if (condition) {
             return true;
        } else {
            return false;
        }
    }

FIDDLE：https://fiddle.sencha.com/#view/editor&fiddle/20pr

隐藏ext js中的操作列项

4 个答案: