View Full Version : Theming In Extjs 4

Pat Emi
23 Nov 2012, 1:08 AM
Currently i'm trying to theme some components that i'm working with.
I have tried changing the base color and it works fine. But i want to change the form textfield to a rounded corner, i thought i will get a variable for text field, which i didn't. When i checked the form variable i saw form-field.

My questions are;
1. is the form-field a class of the textfield and is that where i'm suppose to change the textfield?
2. there is nothing like border-radius on the form variable, where am i suppose to specify the border radius?
3. Can a textfield border really be changed to a round corner without an image, by specifying the border radius?
4. Can i specify a different color for the form, toolbar, window and other components separately?

Thanks in advance.


26 Nov 2012, 7:46 AM
Here is how I would do it:

new Ext.form.Panel({
renderTo : document.body,
items : [
xtype : 'textfield',
fieldLabel : 'Rounded',
cls : 'rounded-input'

.rounded-input input {
border-radius : 5px;

Pat Emi
27 Nov 2012, 12:17 AM
Thanks Simeons, ....... that was a major breakthrough for me.
I'm grateful.

But the only thing i'm still having issue with is font-family and size. Pls can u still suggest?

27 Nov 2012, 5:10 AM
You can use the same class just add font-family and font-size rules

Pat Emi
28 Nov 2012, 7:01 AM
You can use the same class just add font-family and font-size rules

Yes i have done that but it only changes the input text (textfield) font size and family...... no changes to the label text.