Theming In Extjs 4

[Pat Emi]

Hi,
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.

Pat.

[mitchellsimoens]

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]

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?

[mitchellsimoens]

You can use the same class just add font-family and font-size rules

[Pat Emi]

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.