1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    84
    Vote Rating
    0
    nofx is on a distinguished road

      0  

    Default add class to element

    add class to element


    How can i add a class to an element?

    For instance, i have a button like this:

    Code:
    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');

  2. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    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

    HTML Code:
    focusCls: 'your-focus-class'
    Instead, if you want to set a different class when the textfield will be disabled, just set:

    Code:
    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.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  3. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    84
    Vote Rating
    0
    nofx is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Apr 2008
    Posts
    5
    Vote Rating
    0
    venumuvva is on a distinguished road

      0  

    Default Any luck on the issue?

    Any luck on the issue?


    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.

  5. #5
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Quote Originally Posted by nofx View Post
    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.
    Quote Originally Posted by venumuvva View Post
    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:

    Code:
    .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.

    Code:
    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:

    Code:
    .x-field-custom-error input {
         color: Red;
    }
    Then you can simply change the setClass function with the following code:

    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.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  6. #6
    Sencha User
    Join Date
    Sep 2014
    Posts
    13
    Vote Rating
    -2
    MrFox has a little shameless behaviour in the past

      0  

    Default


    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.