Extjs / Javascript: How to put images vertically - aligned with other fields (textboxes,combos) in a multiple line panel with hbox layout?

Question

How can I arrange some images in a panel with 'hbox' layout and in the same time, keep them aligned with the other fields in the form ? Common form fields in ExtJs have a margin-bottom of 5px and a height of 22px, so the only way I can think right now is to put the image considering this field defaults. The problem comes when i have multiple lines in my panel, in Internet Explorer especially.

Basically, I want my form to look like this:

Panel with 5 lines

What I tried so far (first I created the image directly, not as an item in a container --> the same result):

createImageItem: function(config)
{
    return Ext.create('Ext.container.Container', { width: 16, height: 22,
            items: [{ xtype: 'image', padding: 3, src: 'resources/images/arrowLeft.png'}],
            margin: '0 5 5 5'
     });
}

In Chrome looks fine, but in IE the images go up with 1px every row. I don't know why.

Is there any other way to do this? I would be perfect to be a nicer way and don't bother about the pixels and calculations.

Thank you!

I am using ExtJs version 4.0.7

score 0 · Answer 1 · answered Aug 05 '13 at 18:07

You could use the Ext.isIE property to set the dimensions based on the browser, for example:

margin: Ext.isIE ? '0 5 6 5' : '0 5 5 5' //or whatever the appropriate values are

You'll still have to worry about counting pixels, but at least it will look the same in both browsers.

Extjs / Javascript: How to put images vertically - aligned with other fields (textboxes,combos) in a multiple line panel with hbox layout?

1 Answers1