在 ext js 中隐藏操作列项

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 个项目，编辑，space（即 { xtype: 'spacer' }）， 和删除个图标。我想按条件隐藏删除图标。表示删除选项仅在管理员用户登录时显示。请看看这个设计，你可以更好地了解问题

使用下面的代码我可以隐藏删除图标，但工具提示和点击事件仍然会在点击隐藏图标位置时触发。

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

Answer 1

您可以在同一对象中使用 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 2

使用 isDisabled() 方法代替隐藏。

方法必须在操作列本身中才能工作。

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

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

Answer 3

我想你可能想要 hide 和 hideMode。 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 4

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

操作栏配置：

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

在 ext js 中隐藏操作列项

Hide action column items in ext js

extjs

extjs4.2