CODEWITHSUNDEEP
javascriptcssextjs
Edward Tanguay
Edward Tanguay

Reputation: 193302

How to center an image in a column in an ExtJS GridPanel?

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

enter image description here

I've got textAlign: center on my column:

enter image description here

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

enter image description here

Yet it is still left-aligned.

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

Upvotes: 3

Views: 6672

Answers (3)

theturrible
theturrible

Reputation: 33

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

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

Upvotes: 4

Gajahlemu
Gajahlemu

Reputation: 1263

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

Upvotes: 2

thirtydot
thirtydot

Reputation: 228162

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.

Upvotes: 2

Related Questions