ExtJS Change actioncolumn icon from controller / handler

Question

TLDR: I'm using ExtJS 4 and I want to change action column buttons icon from hanlder / controller. How I can do it?

My problem: I have a menu to create a group of devices, it cointain a table of all existing devices (the device has an id, name and affiliation to the group member) with pagination and ajax store. To create a group I have to pass an array of device ids to the server.

To do this I add action column to my grid. By clicking on button in action column I want to add device id to one of the two arrays, that are stored as attributes of the grid (addedMembers and deletedMembers) and change icon in action column. At the moment, all the following code works, but I do not understand how I can change the icon?

Grid:

Ext.define('Portal.view.devicegroups.GroupDevicesGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.groupDevicesGrid',

addedMembers: [],
deletedMembers: [],

store: 'devicegroups.GroupDevicesStore',

columns: [
    {
        dataIndex: 'name',
        flex: 1,
        sortable: true,
        text: Ext.String.capitalize("<?=gettext('name')?>")
    },
    {
        xtype: 'actioncolumn',
        text: Ext.String.capitalize("<?=gettext('member')?>"),
        width: 75,
        items: [
            {
                getClass: function (value, meta, record, rowIndex, colIndex) {
                    var cls = 'deny';
                    if (this.up('groupDevicesGrid').deletedMembers.indexOf(record.get('id')) !== -1 || record.get('member') == 1) {
                        cls = 'allow';
                    }
                    return cls;
                },
                handler: function (view, rowIndex, colIndex, item, event, record, row) {
                    this.fireEvent('changeMembership', rowIndex, record);
                }
            }
        ]
    }
]
});

changeMembership method:

    changeGroupDeviceMembership: function(rowIndex, device) {
    var groupDevicesGrid = this.getGroupDevicesGrid(),
        groupDevicesStore = groupDevicesGrid.getStore(),
        addedMembers = groupDevicesGrid.addedMembers,
        deletedMembers = groupDevicesGrid.deletedMembers,
        deviceId = device.get('id'),
        isMember = device.get('member');
    if(isMember == 1) {
        if(deviceId) {
            if(deletedMembers.indexOf(deviceId) === -1) {
                // Set allow icon
                deletedMembers.push(deviceId);
            } else {
                // Set deny icon
                deletedMembers.splice(deletedMembers.indexOf(deviceId), 1);
            }
        }
    } else if(isMember == 0) {
        if(deviceId) {
            if(addedMembers.indexOf(deviceId) === -1) {
                // Set deny icon
                addedMembers.push(deviceId);
            } else {
                // Set allow icon
                addedMembers.splice(deletedMembers.indexOf(deviceId), 1);
            }
        }
    }
},

Or perhaps there is a better solution to my problem?

Answer 1

I am not privileged to comment so I will just take a shot at the answer. This is the way I do it..you are nearly there just add iconCls. :)

{
    xtype: 'actioncolumn',
    text: Ext.String.capitalize("<?=gettext('member')?>"),
    width: 75,
    items: [
        {
            iconCls:'deny', //<== try adding this icon cls
            getClass: function (value, meta, record, rowIndex, colIndex) {
                var cls = 'deny';
                meta.tdAttr = 'data-qtip="Deny"'; //<== I like tool tips
                if (this.up('groupDevicesGrid').deletedMembers.indexOf(record.get('id')) !== -1 || record.get('member') == 1) {
                    cls = 'allow';
                    meta.tdAttr = 'data-qtip="Allow"'; //<== I like tool tips
                }
                return cls;
            },
            handler: function (view, rowIndex, colIndex, item, event, record, row) {
                this.fireEvent('changeMembership', rowIndex, record);
            }
        }
    ]
}

I use this pattern quite a lot, hopefully it works for you too.