CODEWITHSUNDEEP
cssextjsstylestextfield
Юрий Мацак
Юрий Мацак

Reputation: 3

Round corners in textfield extjs

I need to change style of a textfield in ExtJs

The API docs shown that this is done by:

{
    xtype: 'textfield',
    fieldStyle: {
        'border-radius':'7px'
    }
}

OR 

xtype: 'textfield',
style: {
    'border-radius':'7px'
}

None of these seem to be having any effect, could anyone offer any advice?

Upvotes: 0

Views: 2443

Answers (1)

Scriptable
Scriptable

Reputation: 19750

I managed to acheive this by adding a class and adding specific CSS rules below. Most obvious methods didn't seem to work for me.

items: [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank: false
        }, {
            fieldLabel: 'Last Name',
            name: 'last',
            allowBlank: false,
            cls: 'rounded'
        }],

<style>
   .rounded .x-form-text-wrap, .rounded .x-form-trigger-wrap {
        border-radius: 7px;
    }

</style>

Here is a Sencha Fiddle showing it working on the Last Name field.

I would be interested to know why adding the style directly or even using fieldCls or baseCls weren't working. I will investigate and post any findings I get.

Upvotes: 2

Related Questions