如何将图像居中在ExtJS GridPanel的列中？

Question

我想水平居中“数据”列中的图标：

我的专栏上有 textAlign：center ：

在图标渲染器功能中，我使用 CSS 水平居中：

然而它仍然是左对齐的。

我还需要做什么才能使列中的图标水平居中？

Answer 1

将action：'center'添加到actioncolumn项目就可以了，如下所示：

{
   xtype: 'actioncolumn',
   text: 'Edit',
   align: 'center',
   items: [{**}]
}

Answer 2

这有点猜测，因为我没有任何东西需要测试。

我注意到margin: 0 auto无法使图像居中。

这使我认为您需要display: block图片 - 这应该让您的margin规则符合您的预期。

Answer 3

也许您需要像这样更改渲染功能：

function renderDataIcon(val) {
    if(val=='online') {
        return '<div style="width:100%;height:16px;background-image:url(/images/icon_yellow_dot.png);background-position:center center;background-repeat:no-repeat;">&nbsp;</div>';
    } else {
        return '<div style="width:100%;height:16px;background-image:url(/images/icon_red_dot.png);background-position:center center;background-repeat:no-repeat;">&nbsp;</div>';
    }
}