Question

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

我的问题：我有一个用于创建一组设备的菜单，它汇总了所有现有设备的表格（该设备有id，name和从属关系使用分页和ajax存储到组member）。要创建组，我必须将一组设备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);
            }
        }
    ]
}

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

ExtJS从控制器/处理程序更改actioncolumn图标

1 个答案: