add class to element

[nofx]

How can i add a class to an element?

For instance, i have a button like this:

xtype: 'textfield',
id: 'username',
cls: 'default-state'

How can i dynamically add a new class to this textfield?? I tried something like:

Ext.getCmp('username').addCls('new-class');

[AndreaCammarata]

Hi nofx.
Just a question:
Do you have to change the class, for istance, when your textfield get the focus?

In this case you only need to set

focusCls: 'your-focus-class'

Instead, if you want to set a different class when the textfield will be disabled, just set:

disabledCls: 'your-disabled-cls'

In any other case, can you explain when you need to change the textfield class?
I want to know it just to be sure to give you the correct solution.

Hope this helps.

[nofx]

No sorry, i have to set it manually (by code). It's a formfield and when some fields have incorrect values then i want to be able to change the class of certain textfields. So that the border gets red for example.

[venumuvva]

Did you find any solution for this issue? I am also facing the same issue when i try to change the style of Field dynamically.

[AndreaCammarata]

No sorry, i have to set it manually (by code). It's a formfield and when some fields have incorrect values then i want to be able to change the class of certain textfields. So that the border gets red for example.

Did you find any solution for this issue? I am also facing the same issue when i try to change the style of Field dynamically.

Hi to both!
First you have to define in the application CSS the custom class you want to add to your field in case, for istance, of error.
For istance:

.x-field-custom-error {
      color: Red;
}

Then, take a look at this full example I wrote you on how to add this custom class to your input field.

Ext.setup({
    onReady: function () {
        
        var setClass = function(){
            
            //Get the full field Element (Label + Input)
            var fieldEl = fp.getComponent('myText').getEl().dom;
            
            //Extract the Input field
            var textEl = Ext.DomQuery.select('input', fieldEl);
            
            //Add the custom class
            Ext.fly(textEl).addCls('x-field-custom-error');
            
        }
        
        var fp = new Ext.form.FormPanel({
            fullscreen: true,
            dockedItems: [{
                xtype: 'toolbar',
                title: 'Example',
                items: [{
                    text: 'Set Class',
                    handler: setClass
                }]
            }],
            items: [{
                xtype: 'textfield',
                itemId: 'myText',
                label: 'Test',
                placeHolder: 'Insert your text here...'
            }]
        });
        
    }
});

As you can see from the code, I first get the TextField component dom element from the form, and then I extract from it only the HTML input using the DomQuery.
However, even if this solution works great, I don't really like it!

So, the best way to do that is withoud doubt what follow.

Let's start from the beginning defining the custom css class to apply only to invalid HTML input:

.x-field-custom-error input {
     color: Red;
}

Then you can simply change the setClass function with the following code:

var setClass = function(){
            
      //Add the custom class at the top level of the component
      fp.getComponent('myText').addCls('x-field-custom-error'):
          
}

In this case, I apply the invalid class at the top level of the textfield element, so, according to the CSS class we previously defined, the HTML input wrapped inside it, will have Red text color.

Hope this helps.