extjs4.1 - 使 Ext.Action 的文本属性依赖于另一个字段的值

Question

我在窗口中有一个网格。网格有 3 个操作：编辑、删除和禁用。我想知道是否可以使禁用操作（当前为“禁用/启用”）的文本依赖于所选记录的当前状态。假设用户选择当前状态为启用的记录，则操作的文本应为“禁用”。但是，如果用户选择状态为已禁用的记录，则操作的文本应为“启用”。使用Action时可以这样做吗？还是我需要使用按钮而不是操作？

Answer 1

我假设您的操作按钮位于停靠在网格面板顶部的工具栏中。唯一棘手的事情是获取对网格的引用（不对其进行硬编码）。网格的“选择”事件只为您提供对所使用的行模型的引用。

/* Set a action attribute on the Ext.Action so we can find it */
var action = new Ext.Action({
    text: 'Do something',
    handler: function(){
        Ext.Msg.alert('Click', 'You did something.');
    },
    iconCls: 'do-something',
    itemId: 'myAction',
    action: 'myAction' // I don't like itemId's personally :)
});

/* In the Controller */
init: function() {
    this.control({
        'mygrid': {
            select: this.onRecordSelect
        }
    });
},

onRecordSelect: function(rowModel, record) {
    var grid = rowModel.views[0].ownerCt);
    var action = grid.getDockedItems('toolbar[dock="top"]')[0].down('button[action="myAction"]');
    var enabled = (record.get('CurrentStatus') == "Enabled");
    action.setText(enabled ? 'Disable' : 'Enable');
    action.setIconCls(enabled ? 'myDisableCls' : 'myEnableCls');
}

/* in SASS */
.myDisableCls{
    background-image:url(#{$icon_path}/checkbox.png) !important;
}
.myEnableCls {
    background-image:url(#{$icon_path}/checkbox_ticked.png) !important;
}

祝你好运！

Answer 2

我用另一种方式解决了这个问题。这是我的代码：

grid.getSelectionModel().on({
        selectionchange: function(sm, selections) {
            if (selections.length > 0) {
                Edit.enable();
                Delete.enable();
                    if(selections[0].data.CurrentStatus == "Disabled"){
                    Disable.setText("Enable");
                    Disable.enable();
                }else{
                    Disable.setText("Disable");
                    Disable.enable();
                }
            } else {
                Edit.disable();
                Delete.disable();
                Disable.disable();
            }
        }
    });