1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    11
    Answers
    1
    Vote Rating
    0
    freightgate is on a distinguished road

      0  

    Default Answered: Change inputtext style in Textfield

    Answered: Change inputtext style in Textfield


    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

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

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

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

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

  3. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Answers
    148
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    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:

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

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

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

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

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  4. #3
    Sencha User
    Join Date
    Oct 2010
    Posts
    11
    Answers
    1
    Vote Rating
    0
    freightgate is on a distinguished road

      0  

    Default


    Create that works fine.

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

    for example "ABC-XYZ"

  5. #4
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Answers
    148
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


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

    Code:
    myField.labelEl.update('<span class="black">ABC-</span><span class="red">XYZ</span>');
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

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

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  6. #5
    Sencha User
    Join Date
    Oct 2010
    Posts
    11
    Answers
    1
    Vote Rating
    0
    freightgate is on a distinguished road

      0  

    Default


    Thanks Andrea, every thing is working

  7. #6
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Answers
    148
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    You are welcome
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

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

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  8. #7
    Sencha User
    Join Date
    Oct 2010
    Posts
    11
    Answers
    1
    Vote Rating
    0
    freightgate is on a distinguished road

      0  

    Default


    Here the solution.

    I do it now like this

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

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."