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

**Esha** · 21 Mar 2013 3:30 AM

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?

**Legolas** · 21 Mar 2013 4:38 AM

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'
    ,store: myStore
    ,queryMode: 'local'
    ,displayField: 'name'
    ,valueField: 'id'
    ,renderTo: Ext.getBody()
    // ADD custom CSS class when disable the field
    ,disabledCls: 'input-disabled'
}

**Esha** · 21 Mar 2013 8:50 PM

Hello Legolas,

Thanx for replying...

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

**Legolas** · 22 Mar 2013 3:26 AM

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.

**Esha** · 22 Mar 2013 3:47 AM

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.

**Legolas** · 24 Mar 2013 5:31 AM

Esha, can you make me an example of how is implementing.

**Esha** · 24 Mar 2013 9:46 PM

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; }

**Legolas** · 25 Mar 2013 3:23 AM

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.

**Esha** · 25 Mar 2013 11:04 PM

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

**Legolas** · 27 Mar 2013 4:03 AM

Originally Posted by Esha

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.

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

Thread Tools

Search Thread

Display

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

Tags for this Thread