在分机中隐藏动作栏项目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个项目，编辑，空间（即{的xtype： '间隔'}），和删除图标。我想在条件下隐藏删除图标。仅当管理员用户登录时才显示删除选项。 请认准设计对于这一点，你可以得到更好的主意有关问题

使用此代码波纹管，我能躲删除图标，但工具提示和点击事件仍然开枪点击隐藏图标的位置。

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

Answer 1

我不认为隐藏或禁用的图标是这里的解决方案。如果用户不是管理员，为什么还要添加图标呢？我会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 2

您可以使用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 3

而是躲在使用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

Answer 4

我想，也许你想隐藏和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); 
     } 
     } 
    }