1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    bangalore
    Posts
    8
    Vote Rating
    0
    som123 is on a distinguished road

      0  

    Default Unanswered: Problem with change of text color in a textfield dynamically in android devices

    Unanswered: Problem with change of text color in a textfield dynamically in android devices


    Hello Everyone,

    I wanted to change the color of text inside text-field dynamically, I can able see the color change in google chrome and also in IOS devices but in android it not working. Kindly help me out to fix this.

    Code that I am using :
    $("input[name='"+fieldId+"']").css('color', 'red');
    I am using jquery and I included all required files.

    And I also tried this :

    Ext.getCmp(fieldId).setStyle('color: #db0000;');


    Thanks,
    Somesh

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    This is an Android issue not a Sencha Touch one. Also, I would add jQuery library, there is no reason why you need it and it just adds to the amount the the mobile device has to download
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    May 2012
    Location
    General Electric, Foxboro, MA
    Posts
    68
    Answers
    2
    Vote Rating
    5
    blaynewatt is on a distinguished road

      0  

    Default


    It has been two years since this was reported, and apparently nothing has changed. Have you reported this issue to Google? Have you made any attempts to find a workaround or provide a custom control that does work? We require at least the base HTML form controls to work properly, and I would think that would be a bare minimum requirement before anyone could say that sencha supports a platform. This control is important, because it automatically truncates and isn't susceptible to script injection, unlike a label control. But now we're stuck with black text on a dark blue background, and it's rather embarrassing to report to management that we can't style a simple HTML control.

    -Blayne Watt
    Lead Engineer
    General Electric, Inc.

  4. #4
    bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    44
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      1  

    Default


    Blayne,

    Here is an example that demonstrates changing the text color of a text field that works on android. I have tested in a simulator running android 4.2.2.

    View:
    Code:
    Ext.define('MyApp.view.Main', {
        extend : 'Ext.form.Panel',
        xtype  : 'main',
    
    
        requires : [
            'Ext.field.Select'
        ],
    
    
        config : {
            items : [
                {
                    xtype : 'textfield',
                    name  : 'dynamicField',
                    value : 'dynamic color'
                },
    
    
                {
                    xtype : 'selectfield',
                    name  : 'colorPicker',
                    options : [
                        {
                            text  : 'blue',
                            value : 'blue'
                        },
    
    
                        {
                            text  : 'red',
                            value : 'red'
                        },
    
    
                        {
                            text  : 'green',
                            value : 'green'
                        }
                    ]
                }
            ]
        }
    });
    Controller:
    Code:
    Ext.define('MyApp.controller.Main', {
        extend : 'Ext.app.Controller',
    
    
        config : {
            refs : {
                dynamicField : 'main textfield[name=dynamicField]'
            },
    
    
            control : {
                'main selectfield' : {
                    change : 'onColorPickerChange'
                }
            }
        },
    
    
        onColorPickerChange : function(cmp, newValue) {
            this.getDynamicField().setInputCls(newValue);
        }
    });
    CSS:
    Code:
    .x-android {
        .x-input-el {
            &.blue {
                -webkit-text-fill-color : #000099;
            }
    
    
            &.green {
                -webkit-text-fill-color : #009900;
            }
    
    
            &.red {
                -webkit-text-fill-color : #990000;
            }
        }
    }
    If this isn't what you're looking for, please post more details and the code that you tried.

    I hope this helped,

    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

  5. #5
    Sencha Premium Member
    Join Date
    May 2012
    Location
    General Electric, Foxboro, MA
    Posts
    68
    Answers
    2
    Vote Rating
    5
    blaynewatt is on a distinguished road

      0  

    Default


    Thanks Brice.

    Our SASS guy managed to finally get it working after a day and a half of debugging what was going on. I dumped the document innerHTML for him, and he managed to extract the classes and saw that the webkit was black... but thank you for confirming that we came across the same solution others have used. :-P

    regards,
    -Blayne Watt