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