Как центрировать изображение в столбце в ExtJS GridPanel?

Question

Я бы хотел по горизонтали значок в столбце "Данные":

У меня есть textAlign: центр в моем столбце:

А в функции средства визуализации значков я горизонтально центрирую его с помощью CSS :

Тем не менее, он все еще выровнен по левому краю.

Что еще нужно сделать, чтобы значок в столбце был центрирован по горизонтали?

Answer 1

Добавление align: '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>';
    }
}