ExtJS Align Property for Item

Question

I have an item that looks like this:

items: [{
                xtype: 'box',
                html: '<img src="http://chart.apis.google.com/chart?mychart" alt="" style="text-align:center" />',
                name: 'first',
                id: 'first',
                align:'center',
                style:
                {
                    float:'left',
                    padding: '0px 0px 10px 0px',
                },
                width:'100%'
            }]

I am trying to get it aligned center, I have tried putting in a custom style (underneath padding:) but it says unrecognized character in "text-align". I've also tried putting align:'center' which isn't doing anything at all, but its not causing any errors.

Last thing I did (getting desperate) I added in an inline-style for text align but the box that its inside needs the style not the actual html.

I've tried looking through the documentation and couldn't find text-align under the style doc.

Thanks!

score 6 · Accepted Answer · edited May 23 '17 at 12:21

6

Using text-align without quoting it isn't valid syntax for an object literal. c.f. "JSON syntax for property names".

style: {
  ...
  text-align: 'center'
  ...
}

... should instead be ...

style: {
  ...
  "text-align": 'center'
  ...
}

It also sounds like you're likely to have more luck with vertical-align or line-height than text-align.

edited May 23 '17 at 12:21

Community

1
1

answered Dec 14 '10 at 23:16

wombleton

8,336
1
28
30

2

also, since its javascript - you can use the javascript keyword for the "text-align" attribute, which is "textAlign". like this: `style: { textAlign : 'center' }` – Grahame A Sep 05 '12 at 21:41

score 0 · Answer 2 · answered Nov 19 '18 at 06:31

0

You can write a css class in Main.scss file ,declare all the aligning properties in that and apply class in your component where you're using it in js file,using

cls:"align-Items",

in scss file

.align-Items{
 vertical-align: top;
}

answered Nov 19 '18 at 06:31

Abhishek Bhardwaj

300
4
13

score 0 · Answer 3 · answered Dec 20 '11 at 15:50

text-align only works on child elements, you have a couple of choices here:

Use the deprecated html properties valign="middle" and align="center", which work on the current element.
Put a div around the img and then put style="text-align:center", just remember that text-align only works on inline elements. (img is inline).

ExtJS Align Property for Item

3 Answers3