如何将图像置于ExtJS GridPanel的列中？

Question

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

我有textAlign设置：中心我列：

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

然而它仍然是左对齐的。

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

Answer 1

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

我注意到margin: 0 auto不能正常工作以图像居中。

这让我觉得你需要display: block的图像 - 这应该让你的margin规则做你的期望。

Answer 2

也许你需要改变这样的渲染功能：

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>'; 
    } 
} 

Answer 3

添加对齐： '中心' 的actioncolumn项目并获得成功，就像这样：

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