change border color of text field in ExtJS

问题

I am trying to validate a textfiled value on ajax request call. and I want to turn the color of the border of text field as green if the value is valid.

I tried doing so by calling Ext.getCmp('loginid').style = 'valid-text'; and also I tried Ext.getCmp('loginid').filedClass = 'valid-text';

where valid-text has the code:

<style>
    .valid-text{ 
         background-color:#bbb; 
         border-color:#008B00; 
     } 
</style>

I dont understand why it is not taking this class.

Could anyone please help.

Thanks in advance!

回答1:

Just to clarify the answer given by timdev...

Since you want to style the border of the text field, you will need to get the appropriate element to style first, which in this case is done with the getEl method. This just happens to be the primary element for this component, so calling addClass on the component happens to do the same thing.

for example:

Ext.getCmp('loginid').getEl().addClass('valid-text')

Ext.getCmp('loginid').addClass('valid-text')

Both do the same thing in this case, but don't count on the 2nd one working exactly the way you want in all cases.

On the flip side of things, you can remove this class using the removeClass method.

Ext.getCmp('loginid').getEl().removeClass('valid-text')

回答2:

.style and .fieldClass are configuration values.

Once the component has been created, changing them will have no effect. In other words, those are not properties of the component, they're property names in a configuration object you pass to the component's constructor.

You want TextField.addClass() - which is a method that will apply the CSS class to the component's underlying DOM element.

来源：https://stackoverflow.com/questions/4081573/change-border-color-of-text-field-in-extjs

标签

extjs

textfield