PDA

View Full Version : add class to element



nofx
11 Oct 2011, 4:19 AM
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
11 Oct 2011, 4:33 AM
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
11 Oct 2011, 4:40 AM
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
18 Oct 2011, 12:56 PM
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
20 Oct 2011, 7:13 AM
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.

MrFox
15 Oct 2014, 1:00 AM
Sadly adding the class does not work for me.
Even setting the class manually does not show the effects of my styling.

Why is there no normal way to show an error on a textfield?
Just ShowError(); would be great.