View Full Version : Display (displayfield): How to change text color, alignment and font-weight?

19 Sep 2014, 12:09 PM
Hello experts,

I'd like to be able to change the field's alignment in certain cases, and in others change the text to bold, or change the color.

I have been trying to change basically the style of displayfield without any success. I have a view, and I'm creating the fields in the initComponent method, I had already tried using style, renderer with no success, I guess this should be quite simple, but I am an ExtJS newbie. Any comments or advice are welcome.

Thanks in advance.



19 Sep 2014, 9:46 PM
Use the cls config to add a CSS class to the field's main element then use CSS to apply the relevant styling. If the styles don't have any effect use the browser's dev tools to inspect the styles and see which rules are beating yours and adjust your selectors accordingly.

22 Sep 2014, 7:39 AM
Hi, thank you for your answer, I have been trying it out without success, I can't seem to override the Ext theme CSS.

In my view's initComponent method, I have something like this:

xtype : 'displayfield',
name : 'dayLbl',
componentCls : 'x-form-display-field my-bold-text',
style : {'font-weight' : 'bold'},
value : this.getDayLbl()

Inspecting the HTML and CSS I can see that the style is being applied to the table which has the Display field in, but the Ext Theme overrides it.
What can I do in this case?

Thanks, regard!

22 Sep 2014, 7:42 AM
Also tried cls as you sugested, same result 8-|.

22 Sep 2014, 8:19 AM
Use cls, not componentCls. However, the net result is the same, an extra class on the outer element. Once you've got the extra class on the element it is just basic CSS from then on. The way you're throwing settings at this, expecting different results, implies you think there's some deeper magic going on. There isn't. Add a class, use CSS for styling - that's it.

You need to target the correct element with the selector. The font-weight is set on the x-form-display-field so it won't inherit any value you set on an ancestor element.

Use something like:

.my-bold-text .x-form-display-field {
font-weight: bold;

22 Sep 2014, 9:11 AM
Thank you. This may sound completely silly, I hope you understand I'm new in this. Where should I put the CSS? A separate file? inside the view?Seriously, don't get mad at me, this is completely new for me.

22 Sep 2014, 9:18 AM
It needs to go in a CSS file, there's no special way to put it 'inside a view'. If you're building the ExtJS CSS from source you can include it in there, otherwise just create your own.

22 Sep 2014, 9:40 AM
Ok, I'll create a new CSS file, but...

Where should I put it?
How can I reference it?
How should I name it?

This is how my project looks like.
Thanks for your advice and patience, I really appreciate it.


22 Sep 2014, 10:02 AM
I'd suggest having a folder separate from your JS files (i.e. not in app) for CSS and images. The name 'resources' is commonly used.

If you only have a very small quantity of CSS you could bundle everything into one file. Once it gets a bit bigger you'd need to split it up, which adds the complication of a build to concatenate the separate files into one. At that point you may want to consider something like SASS or even Sencha Cmd.

Assuming you don't need a build step you can just include the CSS directly in the HTML with a link tag.

23 Sep 2014, 7:23 AM
Thank you so much for the help and patience, for my solution I did as following:

Used cls for displayfield and assigned a class.
Created as suggested a "resources" folder and created a css file containing the class I declared for the displayfield. (Actually it was ".my-class div {...} ").
Added reference of this new stylesheet at index.html.
It's working just fine. Again, thanks!!

Best regards,


7 Jul 2016, 10:51 AM
Hi! It's late but I had the same problem. You can access the inputEl property for the displayField and then just use:

color: "red"