javascript - extjs4动态更改操作列图标

Question

我正在使用getClass在操作列中呈现图标。

{
xtype: 'actioncolumn',
id:'actionColumnGridUsers',
width: 30,
hideable: false,
items: ['->',
    {
        getClass: function (v, meta, rec)
        {
            if (rec.get('nameUser') != '') return 'icon-edit';
            else return 'icon-add';
        }

    }
}

和CSS代码：

.icon-add { background-image: url("../images/add.png"); }
.icon-edit { background-image: url("../images/edit.png"); }

代码似乎是正确的，但未显示图标。我错过了什么？

Answer 1

我已经这样解决了：

{
    xtype: 'actioncolumn',
    id:'actionColumnGridUsers',
    width: 30,
    hideable: false,
    items:
        [{
            getClass: function(v, meta, rec) {
                if (rec.get('nameUser') != '') {
                    this.items[0].tooltip = 'del';
                    return 'icon-del';
                } else {
                    this.items[0].tooltip = 'edit';
                    return 'icon-edit';
                }
            }
        }]
}

和CSS代码：

.x-action-col-cell img.icon-del {
background-image: url("../images/delete.png");
}
.x-action-col-cell img.icon-edit {
    background-image: url("../images/add.png");
}

Answer 2

或者你可以试试这个：

iconCls: me.readOnly==true 吗？“图标视图”：“图标编辑”，