如何在ExtJS版本7中向操作列中的项添加填充

y1aodyip 于 2022-10-18 发布在其他

关注(0)|答案(1)|浏览(156)

我有一个使用可点击图标的动作栏目，来自Font Awesom。我唯一的问题是图标太近了，填充配置不起作用。有谁有解决方案吗？

{
            header:'Actions',
            dataIndex: 'id', 
            xtype:'actioncolumn',     
            focusableContainer: true,       
            flex: 0.55,
            align: 'center',
            items: [{
                iconCls:'fas fa-pen',
                ariaLabel:'Edit Feedback',
                ariaLabelledBy:'Edit Feedback',
                tooltip: 'Edit',

                handler:'onEdit'
            },
            {
                id: Ext7.id() + '_delete',
                itemId: Ext7.id() + '_delete',
                ariaLabel:'Delete Feedback',
                ariaLabelledBy:'Delete Feedback',
                iconCls: 'fas fa-trash',        
                tooltip: 'Delete',
                handler: 'onDelete'
            }
            ]           
}

extjs

来源：https://stackoverflow.com/questions/73952282/how-to-add-padding-to-items-in-action-column-in-extjs-version-7

1条答案

按热度按时间

pokxtpni1#

您可以添加自定义的CSS类。

.custom-padding {
    padding: 15px;
}

然后添加到您的物品中。

{
        xtype: 'actioncolumn',
        width: 70,
        items: [{
            iconCls: 'x-fa fa-cog custom-padding',
            tooltip: 'Edit',
            handler: function(grid, rowIndex, colIndex) {
                var rec = grid.getStore().getAt(rowIndex);
                alert("Edit " + rec.get('firstname'));
            }
        }, {
            iconCls: 'x-fa fa-times custom-padding',
            tooltip: 'Delete',
            handler: function(grid, rowIndex, colIndex) {
                var rec = grid.getStore().getAt(rowIndex);

                alert("Terminate " + rec.get('firstname'));
            }
        }]
    }

赞(0）回复(0）举报 2022-10-18

我来回答

如何在ExtJS版本7中向操作列中的项添加填充

1条答案

相关问题

热门标签

最新问答