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

时间:2012-12-21 08:40:11

标签: extjs4.1

我在一个窗口中有一个网格。网格有3个操作:编辑,删除和禁用。我想知道是否可以使禁用操作(当前为“禁用/启用”)的文本取决于所选记录的当前状态。因此,用户选择当前状态为已启用的记录,然后操作的文本应为“禁用”。但是,如果用户选择状态为“已禁用”的记录,则操作的文本应为“启用”。使用Action时可以这样做吗?或者我是否需要使用按钮而不是动作?

2 个答案:

答案 0 :(得分:0)

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

/* 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;
}
祝你好运!

答案 1 :(得分:0)

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

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();
            }
        }
    });