ExtJS 从 Controller /处理程序更改操作列图标

Question

TLDR:我正在使用 ExtJS 4，我想从 hanlder/controller 更改操作列按钮图标。我该怎么做？

我的问题:我有一个菜单来创建一组设备，它包含一个所有现有设备的表(设备有一个id，name 和隶属于组 member) 与分页和 ajax 存储。要创建一个组，我必须将一组设备 ID 传递给服务器。

为此，我将操作列添加到我的网格中。通过单击操作列中的按钮，我想将设备 ID 添加到两个数组之一，这两个数组存储为网格的属性(addedMembers 和 deletedMembers)并更改图标在行动栏。目前，以下所有代码都有效，但我不明白如何更改图标？

网格:

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 方法:

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

或者我的问题可能有更好的解决方案？

Answer 1

我没有发表评论的特权，所以我只是简单地回答一下。这就是我这样做的方式..你几乎就在那里只需添加 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);
            }
        }
    ]
}

我经常使用这种模式，希望它也适合你。