extjs4动态更改操作列图标

Question

I'm using getClass to render the icon in the action column.

{
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';
        }

    }
}

And the css code:

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

The code seems to be correct, but the icon is not shown. What I'm missing?

Answer 1

I have resolved it like this:

{
    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';
                }
            }
        }]
}

And the css code:

.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

or you can try this :

iconCls: me.readOnly==true ? 'icon-view' : 'icon-edit',