1. #1
    Sencha User
    Join Date
    Mar 2013
    Location
    India
    Posts
    17
    Vote Rating
    0
    Esha is on a distinguished road

      0  

    Default Label of combobox is displayed in grey color in IE8 while disabling combobox

    Label of combobox is displayed in grey color in IE8 while disabling combobox


    I have a combobox which is enabled/disabled based on certain conditions.
    When I disable it,the color of its label is changed to grey in IE8.
    It works fine in Firefox and Chrome.

    Can anybody plz help me with this issue?

  2. #2
    Sencha User Legolas's Avatar
    Join Date
    Apr 2010
    Location
    Brazil/MG
    Posts
    58
    Vote Rating
    3
    Legolas is on a distinguished road

      0  

    Default


    Hi Esha,

    This occurs because of the style used in the CSS class "x-item-disabled" label does turn gray in IE. I always create a CSS class for disabled fields and add the attribute "disabledCls" in my fields like below:
    My CSS:
    PHP Code:
    .input-disabled cursor: default; }
    .
    input-disabled input, .input-disabled .x-form-cb-label-after color#696969; }
    .input-disabled .x-form-text, .input-disabled textarea.x-form-field background#eeeeee !important; } 
    My field
    PHP Code:
    {
         
    fieldLabel'Choose State'
        
    ,storemyStore
        
    ,queryMode'local'
        
    ,displayField'name'
        
    ,valueField'id'
        
    ,renderToExt.getBody()
        
    // ADD custom CSS class when disable the field
        
    ,disabledCls'input-disabled'

    I am sorry my english, I am learning yet
    Portuguese blog: http://wessdevel.blogspot.com.br/
    Twitter: @wlegolas

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Location
    India
    Posts
    17
    Vote Rating
    0
    Esha is on a distinguished road

      0  

    Default


    Hello Legolas,

    Thanx for replying...

    I tried ur solution but its nt working.....
    i dont know whats going wrong...

  4. #4
    Sencha User Legolas's Avatar
    Join Date
    Apr 2010
    Location
    Brazil/MG
    Posts
    58
    Vote Rating
    3
    Legolas is on a distinguished road

      0  

    Default


    Esha, you add the custom CSS in your file? See the example below:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Windows Example</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../ext-all.js"></script>
        <style type="text/css">
            body { padding: 10px; }
            .input-disabled { cursor: default; }
            .input-disabled input, .input-disabled .x-form-cb-label-after { color: #696969; }
            .input-disabled .x-form-text, .input-disabled textarea.x-form-field { background: #eeeeee !important; }  
        </style>
        <script language="javascript">
            Ext.onReady(function(){
                var form = Ext.create('Ext.form.Panel', {
                     renderTo: Ext.getBody()
                    ,title: 'Form with disabled fields'
                    ,width: 400
                    ,height: 90
                    ,bodyPadding: 5
                    ,defaultType: 'textfield'
                    ,defaults: {
                         labelWidth: 60
                        ,disabled: true
                        ,disabledCls: 'input-disabled'
                        ,anchor: '99%'
                    }
                    ,items: [{
                         name: 'name'
                        ,fieldLabel: 'Name'
                        ,value: 'Legolas Kun'
    
    
                    }, {
                         name: 'email'
                        ,fieldLabel: 'Email'
                        ,value: 'legolas@mail.com'
                    }]
                });
            });
        </script>
    </head>
    <body>
    </body>
    </html>
    The fields "name" and "email" should be customized with style "input-disabled". The file "form_with_disabled_fields.png" is the result of example.I tested in IE8 and IE9.
    Attached Images
    I am sorry my english, I am learning yet
    Portuguese blog: http://wessdevel.blogspot.com.br/
    Twitter: @wlegolas

  5. #5
    Sencha User
    Join Date
    Mar 2013
    Location
    India
    Posts
    17
    Vote Rating
    0
    Esha is on a distinguished road

      0  

    Default


    Hi Legolas,

    Thanx for giving me ur whole code....
    I tried it once again....bt its nt working....
    I have also tried to use readonly instead of disabled config....
    its working fine except dropdown trigger hides.

  6. #6
    Sencha User Legolas's Avatar
    Join Date
    Apr 2010
    Location
    Brazil/MG
    Posts
    58
    Vote Rating
    3
    Legolas is on a distinguished road

      0  

    Default


    Esha, can you make me an example of how is implementing.
    I am sorry my english, I am learning yet
    Portuguese blog: http://wessdevel.blogspot.com.br/
    Twitter: @wlegolas

  7. #7
    Sencha User
    Join Date
    Mar 2013
    Location
    India
    Posts
    17
    Vote Rating
    0
    Esha is on a distinguished road

      0  

    Default


    I have written this code. Can u plz check it and tell me where I am going wrong??
    HTML Code:
                       var state = Ext.create('Ext.form.field.ComboBox', {
                                columnWidth : .3,
                                fieldLabel : this.langObj.field16,
                                labelAlign : 'top',
                                labelSeparator : ' ',
                                disabledCls : 'input-disabled',
                                disabled : true,                                                       
                                style : 'margin-right: 5px',
                                store : Ext.create('Ext.data.Store', {
                                    model : 'ValueDomain',
                                    proxy : {
                                        type : 'ajax',
                                        url : 'service/geodetails/state/list.json',
                                        reader : {
                                            type : 'json',
                                            root : 'data'
                                        },
                                        extraParams : {
                                            countryCd : countryVal
                                        }
                                    }
                                }),
                                displayField : 'name',
                                valueField : 'value',
                                queryMode : 'local',
                                triggerAction : 'all',
                                listConfig : {
                                    loadMask : false
                                },
                                forceSelection : true,
                                enableKeyEvents : true
                            });
    And in my css file, I have added this class :
    HTML Code:
    .input-disabled { cursor: default; }
    .input-disabled input, .input-disabled .x-form-cb-label-after { color: #696969; }
    .input-disabled .x-form-text, .input-disabled textarea.x-form-field { background: #eeeeee !important; }

  8. #8
    Sencha User Legolas's Avatar
    Join Date
    Apr 2010
    Location
    Brazil/MG
    Posts
    58
    Vote Rating
    3
    Legolas is on a distinguished road

      0  

    Default


    Esha, I add your code in my example and the combobox field is displayed with disabled style. Below the code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Windows Example</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../ext-all.js"></script>
        <style type="text/css">
            body { padding: 10px; }
            .input-disabled { cursor: default; }
            .input-disabled input, .input-disabled .x-form-cb-label-after { color: #696969; }
            .input-disabled .x-form-text, .input-disabled textarea.x-form-field { background: #eeeeee !important; }  
        </style>
        <script language="javascript">
            Ext.define('ValueDomain', {
                 extend: 'Ext.data.Model'
                ,fields: ['value', 'name']
            });
    
    
            Ext.onReady(function(){
                // Your disabled field
                var state = Ext.create('Ext.form.field.ComboBox', {
                    columnWidth : .3,
                    fieldLabel : 'this.langObj.field16',
                    labelAlign : 'top',
                    labelSeparator : ' ',
                    disabledCls : 'input-disabled',
                    disabled : true,                                                       
                    style : 'margin-right: 5px',
                    store : Ext.create('Ext.data.Store', {
                        model : 'ValueDomain',
                        proxy : {
                            type : 'ajax',
                            url : 'service/geodetails/state/list.json',
                            reader : {
                                type : 'json',
                                root : 'data'
                            },
                            extraParams : {
                                countryCd : 'countryVal'
                            }
                        }
                    }),
                    displayField : 'name',
                    valueField : 'value',
                    queryMode : 'local',
                    triggerAction : 'all',
                    listConfig : {
                        loadMask : false
                    },
                    forceSelection : true,
                    enableKeyEvents : true
                });
    
    
                var form = Ext.create('Ext.form.Panel', {
                     renderTo: Ext.getBody()
                    ,title: 'Form with disabled fields'
                    ,width: 400
                    ,bodyPadding: 5
                    ,defaultType: 'textfield'
                    ,defaults: {
                         labelWidth: 60
                        ,disabled: true
                        ,disabledCls: 'input-disabled'
                        ,anchor: '99%'
                    }
                    ,items: [{
                         name: 'name'
                        ,fieldLabel: 'Name'
                        ,value: 'Legolas Kun'
    
    
    
    
                    }, {
                         name: 'email'
                        ,fieldLabel: 'Email'
                        ,value: 'legolas@mail.com'
                    },
                    state]
                });
            });
        </script>
    </head>
    <body>
    </body>
    </html>
    See the image "disabled_fields.png" the field "this.langObj.field16". I tested in versions ExtJS4.2, ExtJS4.1.1, ExtJS4.1.0 e ExtJS4.0.7.
    Do you cleared your cache, because I've had many problems with cache in IE.
    Attached Images
    I am sorry my english, I am learning yet
    Portuguese blog: http://wessdevel.blogspot.com.br/
    Twitter: @wlegolas

  9. #9
    Sencha User
    Join Date
    Mar 2013
    Location
    India
    Posts
    17
    Vote Rating
    0
    Esha is on a distinguished road

      0  

    Default


    Legolas, I cleared the cache....
    Its still not working....
    All changes are easily reflecting on FF....but not on IE....

  10. #10
    Sencha User Legolas's Avatar
    Join Date
    Apr 2010
    Location
    Brazil/MG
    Posts
    58
    Vote Rating
    3
    Legolas is on a distinguished road

      0  

    Default


    Quote Originally Posted by Esha View Post
    Legolas, I cleared the cache....
    Its still not working....
    All changes are easily reflecting on FF....but not on IE....
    It is stranger, do you used my last example? Because I tested this example in IE8. What is your ext version? Put here the image as was your test.
    Other thing is if your CSS file was loaded with the new custom styles.
    I am sorry my english, I am learning yet
    Portuguese blog: http://wessdevel.blogspot.com.br/
    Twitter: @wlegolas

Thread Participants: 1

Tags for this Thread