Ext JS中如何通过控制器方法动态隐藏/显示表格操作按钮

我尝试通过控制器方法动态隐藏/显示网格ActionColumn中的按钮，当前isActionDisabled能正常工作，但hidden属性始终返回true，无论修改函数返回值。以下是相关代码：

网格操作配置 #

actions: {
    run: {
        iconCls: 'u4f-backgroundjobs-start-icon',
        tooltip: U4.Titles.getTitle(20637, 'Run'),
        handler: 'onRunClick',
        isActionDisabled: 'isRunDisabled'
    },
    pause: {
         xtype: 'u4_button',
         iconCls: 'u4f-backgroundjobs-pause-icon',
         padding: 0,
         width: 15,
         height: 15,
         tooltip: U4.Titles.getTitle(60600, 'Hold'),
         handler: 'onPauseClick',
         hidden: 'isPauseHidden'
    },
    kill: {
        iconCls: 'u4f-backgroundjobs-kill-icon',
        tooltip: U4.Titles.getTitle(39340, 'Terminate'),
        handler: 'onKillClick',
        isActionDisabled: 'isKillDisabled'
    },
    resume: {
        xtype: 'u4_button',
        iconCls: 'u4f-backgroundjobs-resume-icon',
        padding: 0,
        width: 15,
        height: 15,
        handler: 'onResumeClick',
        hidden: 'isResumeHidden'
    }
},

ActionColumn列配置 #

{
    text: U4.Titles.getTitle(47035, 'Actions'),
    menuDisabled: true,
    sortable: false,
    xtype: 'actioncolumn',
    flex: 2,
    items: ['@run', '@pause', '@resume', '@kill'],
    draggable: false,
    resizable: false,
    align: 'center'
},

控制器对应方法 #

isRunDisabled: function (grid, rowIndex) {
    var me = this,
        gridStore = grid.getStore(),
        storedTask = gridStore.getAt(rowIndex),
        jobCanRunOnDemand = storedTask.get('canRunOnDemand');

    return me.jobIsRunning(grid, rowIndex) || !jobCanRunOnDemand;
},

isResumeHidden: function (grid, rowIndex) {
    var me = this,
        gridStore = grid.getStore(),
        storedTask = gridStore.getAt(rowIndex),
        jobStatus = storedTask.get('jobStatus'),
        activeToTime = storedTask.get('activeToTime'),
        currentTime = new Date();

    return jobStatus === 0 || activeToTime < currentTime;
},

问题原因 #

ActionColumn的isActionDisabled是框架专门提供的行级回调配置，支持传入控制器方法名字符串并自动执行；但你给自定义按钮设置的hidden属性，框架并不会自动解析为控制器方法调用——它只会把字符串'isResumeHidden'当作布尔值处理（非空字符串在JS中会被转为true），所以按钮始终隐藏。

解决方法 #

方法1：使用isActionHidden配置（推荐） #

如果你的ExtJS版本（或所用框架）支持ActionColumn的isActionHidden配置，直接替换hidden为该属性即可，用法和isActionDisabled完全一致：

pause: {
     xtype: 'u4_button',
     iconCls: 'u4f-backgroundjobs-pause-icon',
     padding: 0,
     width: 15,
     height: 15,
     tooltip: U4.Titles.getTitle(60600, 'Hold'),
     handler: 'onPauseClick',
     isActionHidden: 'isPauseHidden' // 替换hidden为isActionHidden
},
resume: {
    xtype: 'u4_button',
    iconCls: 'u4f-backgroundjobs-resume-icon',
    padding: 0,
    width: 15,
    height: 15,
    handler: 'onResumeClick',
    isActionHidden: 'isResumeHidden' // 替换hidden为isActionHidden
}

方法2：通过ActionColumn的renderer手动控制 #

如果框架不支持isActionHidden，可以在ActionColumn的renderer中手动处理按钮的显示隐藏：

{
    text: U4.Titles.getTitle(47035, 'Actions'),
    menuDisabled: true,
    sortable: false,
    xtype: 'actioncolumn',
    flex: 2,
    items: ['@run', '@pause', '@resume', '@kill'],
    draggable: false,
    resizable: false,
    align: 'center',
    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
        // 调用默认renderer生成按钮HTML
        var html = this.callParent(arguments);
        var controller = this.lookupController();
        
        // 判断当前行是否要隐藏按钮
        var hidePause = controller.isPauseHidden(view.grid, rowIndex);
        var hideResume = controller.isResumeHidden(view.grid, rowIndex);
        
        // 给对应按钮添加隐藏类（假设你的CSS中有.hidden{display:none;}）
        if(hidePause) {
            html = html.replace('u4f-backgroundjobs-pause-icon', 'u4f-backgroundjobs-pause-icon hidden');
        }
        if(hideResume) {
            html = html.replace('u4f-backgroundjobs-resume-icon', 'u4f-backgroundjobs-resume-icon hidden');
        }
        
        return html;
    }
}

方法3：MVVM绑定（适合支持绑定的场景） #

如果你的项目使用MVVM模式，可以通过绑定表达式直接关联记录字段或视图模型方法：

resume: {
    xtype: 'u4_button',
    iconCls: 'u4f-backgroundjobs-resume-icon',
    padding: 0,
    width: 15,
    height: 15,
    handler: 'onResumeClick',
    hidden: '{!record.canResume}' // 绑定到记录的canResume字段，或视图模型方法
}

内容的提问来源于stack exchange，提问作者Weedosaurus