Change inputtext style in Textfield

[freightgate]

How can I change the testcolor of special textfields.

I can change it for every textfield with this

x-input-text {
color: red;
}

but i want it just for special texfields

with addCls() and removeCls()

thanks

[AndreaCammarata]

Hi.
What you need to do to achieve that is to provide to the wanted textfields a custom "cls" config.
Take a look at the following example:

Ext.setup({
    onReady: function() {
        
        var form = new Ext.form.FormPanel({
            fullscreen: true,
            dockedItems: [{
                xtype: 'toolbar',
                title: 'Example'
            }],
            items: [{
                xtype: 'textfield',
                itemId: 'txtFirst',
                name : 'first',
                label: 'First name',
		cls: 'myCustomField'
            }]
        });
    }
    
});

Then you need to define your "myCustomField" class in your application CSS as follows:

.x-field.myCustomField input {
     color: Red;
}

This will give to all the textfields which have the same "cls" config, a red foreground color.
If you want to change the color only on same particular events, you just need to add the same CSS class to the wanted textfields:

Ext.setup({
    onReady: function() {
        
        var form = new Ext.form.FormPanel({
            fullscreen: true,
            dockedItems: [{
                xtype: 'toolbar',
                title: 'Example',
                items: [{
                    xtype: 'button',
                    text: 'Change Color',
                    handler: function(){
                    
						//Changing the textfield color
						form.getComponent('txtFirst').addCls('myCustomField');


                    }
                }]
            }],
            items: [{
                xtype: 'textfield',
                itemId: 'txtFirst',
                name : 'first',
                label: 'First name'
            }]
        });
    }
    
});

Hope this helps.

[freightgate]

Create that works fine.

Is there a way to give the Label two different colors ? like a cutline

for example "ABC-XYZ"

[AndreaCammarata]

You can try to update the label element, for istance, in the following way:

myField.labelEl.update('<span class="black">ABC-</span><span class="red">XYZ</span>');

[freightgate]

Thanks Andrea, every thing is working

[AndreaCammarata]

You are welcome

[freightgate]

Here the solution.

I do it now like this

{
                    xtype:   'textfield',
                    id:         'Zcard_textfield_ABC_XYZ_dp',
                    name :  'ABC_XYZ_dp',
                    label: 'ABC*-XYZ',
                    listeners: {
                        afterrender: function(ele) {
                            ele.fieldEl.dom.readOnly = true;
                            
labelEl.update('<span class="font_red">ABC*-</span><span class="font_black">XYZ</span>');
                        }
                    }
                }