I would like to horizontally center the icon in the column "Data":

I've got textAlign: center on my column:

And in the icon renderer function, I'm horizontally centering it with CSS:

Yet it is still left-aligned.

What else do I have to do so that the icon in the column is centered horizontally?

I would like to horizontally center the icon in the column "Data":

I've got textAlign: center on my column:

And in the icon renderer function, I'm horizontally centering it with CSS:

Yet it is still left-aligned.

What else do I have to do so that the icon in the column is centered horizontally?

• javascript
• css
• extjs

• can you give me the plete renderDataIcon function? – Gajahlemu Commented Feb 16, 2011 at 10:05

3 Answers 3

Adding align: 'center' to the actioncolumn item did the trick, like so:

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

This is somewhat of a guess, because I don't have anything to test.

I notice that margin: 0 auto isn't working to center the image.

This leads me to think that you need display: block on the image - that should let your margin rule do what you expect.

Maybe you need to change the render function like this:

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