Extjs 如何为单行禁用操作列项？

考虑以下JSON示例：

[{id:1,editable:true},{id:2,editable:false}]

这些记录将加载到存储中，然后显示在网格面板中。此网格有一个用于编辑的操作列项。我正在寻找一种方法，只对第二行禁用“编辑”按钮，而不在渲染后执行计算。我希望使用与属性类似的内置功能，而不是在网格渲染后通过存储循环更新每一行

---

ExtJS 4.1.1是否提供了这种功能？

首先我要说的是：我不惜一切代价避免使用action列，它完全无法执行任何类型的渲染逻辑（例如每行不同的图像，并根据行模型有条件地显示）。而是定义一个常规列来渲染图像，并利用列中的单击事件。下面是我的代码中的一个示例：

{
    header:    " ",
    dataIndex: "some_index",
    width:     26,
    renderer: function(value, metaData){
        metaData.style += "padding:0px;";
        if(value)
            return "&nbsp;<img src=\"extjs/4.0/sms/icons/fam/magnifier.png\"/>";
        return value;
    },
    listeners: {
        click: function(gridView, htmlSomething, rowIndex, columnIndex, theEvent){
            var store = myGrid.getStore();
            var record = store.getAt(rowIndex);
            if(record.get("some_index"))
                //do action
        }
    }
}

{
标题：“”，
数据索引：“一些索引”，
宽度：26，
渲染器：函数（值、元数据）{
metaData.style+=“填充：0px；”；
如果（值）
返回“”；
返回值；
},
听众：{
单击：函数（gridView、htmlSomething、rowIndex、columnIndex、theEvent）{
var store=myGrid.getStore（）；
var记录=store.getAt（rowIndex）；
if（record.get（“某些索引”））
//行动
}
}
}

您可以使用设置isDisabled配置（至少从版本4.2.1开始）：

---

当isDisabled（..）返回true时，图标模糊，并且在鼠标单击时不会触发处理程序。

在Louis发布他的答案之前，我已经忘记了这个问题。我最终决定覆盖ActionColumn以添加缺少的功能。代码如下：

Ext.grid.column.Action.override({
    defaultRenderer: function (v, meta) {
        var me = this,
            disabled, tooltip,
            prefix = Ext.baseCSSPrefix,
            scope = me.origScope || me,
            items = me.items,
            len = items.length,
            i = 0,
            item;
        v = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';
        meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
        for (; i < len; i++) {
            item = items[i];
            disabled = item.disabled || (item.isDisabled ? item.isDisabled.apply(item.scope || scope, arguments) : false);
            tooltip = disabled ? null : (item.tooltip || (item.getTip ? item.getTip.apply(item.scope || scope, arguments) : null));
            if (!item.hasActionConfiguration) {
                item.stopSelection = me.stopSelection;
                item.disable = Ext.Function.bind(me.disableAction, me, [i], 0);
                item.enable = Ext.Function.bind(me.enableAction, me, [i], 0);
                item.hasActionConfiguration = true;
            }
            v += '<img alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
            '" class="' + prefix + 'action-col-icon ' + prefix + 'action-col-' + String(i) + ' ' + (disabled ? prefix + 'item-disabled' : ' ') +
            ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope || scope, arguments) : (item.iconCls || me.iconCls || '')) + '"' +
            (tooltip ? ' data-qtip="' + tooltip + '"' : '') + ' />';
        }
        return v;
    }
});

Ext.grid.column.Action.override({
defaultRenderer:函数（v，元）{
var me=这个，
禁用，工具提示，
前缀=Ext.baseCSSPrefix，
scope=me.origScope | | me，
items=me.items，
len=项目长度，
i=0，
项目；
v=Ext.isFunction（me.origrender）？me.origrender.apply（作用域、参数）| |“”“”；
meta.tdCls+=''+Ext.baseCSSPrefix+'action col cell'；
对于（；i

我在Sencha论坛上找到了以下解决方案： 除了此处已描述的“isDisabled”（isDisabled）功能外，您还可以使用以下配置更改（或隐藏）图标以根据记录显示：

getClass: function(value,metadata,record){
    if (record.get('description')){  //read your condition from the record
        return 'icon-pencil-go';    // add a CSS-Class to display what icon you like
    } else {
        return '';        //add no CSS-Class
    }
}

我的CSS类定义为：

.icon-pencil-go {
    background-image: url('../images/icons/famfamfam/pencil_go.png') !important;
}

---

因为我是通过CSS显示图标的，所以这是一种动态更改图标的快速方法。请注意，通过“isDisabled”禁用处理程序仍然是必要的，因为否则，即使没有显示图标，如果单击操作列，处理程序也会启动。

我在ExtJs 6.0.1版本中使用了以下功能，效果很好。使用“getClass”配置。 返回要应用于图标图像的CSS类的函数

                {
                  xtype: 'actioncolumn',
                  flex: 1,
                  text: 'Action'
                  items: [{
                      tooltip: 'Import',
                      getClass: function (value, meta, record) {
                         if(record.get('Name') == 'disable'){
                             return 'x-hidden'; // when u want to hide icon
                         }
                      }
                         return 'x-grid-icon' ; // show icon


                  }]
                }

---

嗨，雷米乌斯。这很好，但有点太复杂了，因为内置功能丢失了。（）缺少哪些功能？我的代码示例非常简单。Ext 4.1.1在没有自定义代码的情况下不提供所需的功能。是的，如果需要，则需要查看传递到click处理程序的事件。这个事件有一个CurrutTror或者类似的东西，你可以看到它是否是图像。你考虑过这里使用的版本吗？这个答案是针对ExtJS4.1.1的。另外，如果你想提供帮助，请引用css和getClass的文档（如它们应该在何处使用），因为这些都是非常通用的东西，几乎在任何地方都可以使用。我也是这样做的。是的，我也是这样做的。我无法尝试你的解决方案，因为我很久以前就停止了相关项目的工作：-无论如何，感谢您的贡献，这可能对其他人有所帮助：-）这不会删除工具提示，只用于更改外观和感觉。很好的示例，效果很好。我的建议是，如果要显示，字段名应该与配置选项匹配。IE'displayIsDisabled'ExtJS 6！时光飞逝：-）不幸的是，我无法再评估你的职位，这是新一代的工作：-）无论如何，谢谢你的贡献！

                {
                  xtype: 'actioncolumn',
                  flex: 1,
                  text: 'Action'
                  items: [{
                      tooltip: 'Import',
                      getClass: function (value, meta, record) {
                         if(record.get('Name') == 'disable'){
                             return 'x-hidden'; // when u want to hide icon
                         }
                      }
                         return 'x-grid-icon' ; // show icon


                  }]
                }