Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2010
    Vote Rating
    mrusinak is on a distinguished road


    Default [OPEN-832] IE8 / FF3 disabled fieldLabel difference

    Ext version tested:
    • Ext 3.2.0 Release

    Adapter used:
    • ext

    css used:
    • only default ext-all.css

    Browser versions tested against:
    • IE8
    • FF3 (firebug 1.5.3 installed)

    Operating System:
    • Windows 7 Ult
    • Xubuntu 9.10

    • When disabling a form panel, formLabel's of elements are not disabled in Firefox, but are in IE8

    Test Case:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
            <link rel="stylesheet" type="text/css" href="./ext-3.2.0/resources/css/ext-all.css" />
            <script type="text/javascript" src="./ext-3.2.0/adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="./ext-3.2.0/ext-all-debug.js"></script>
            <script type="text/javascript">
                    var mainview = new Ext.Viewport({
                        layout: 'fit',
                        items: [
                                xtype: 'fieldset',
                                title: 'Widget',
                                layout: 'anchor',
                                defaults: { anchor: '100%' },
                                items: [
                                        xtype: 'checkbox',
                                        boxLabel: 'QFT',
                                        checked: true,
                                        handler: function (chk, isChkd) {
                                            if (isChkd) {
                                            else {
                                    { xtype: 'spacer', height: 15 },
                                        id: 'id-opts',
                                        style: 'padding-left:20px;',
                                        xtype: 'form',
                                        padding: '5 0',
                                        border: false,
                                        maskDisabled: false,
                                        items: [
                                                xtype: 'combo',
                                                fieldLabel: 'Foo'
                                                xtype: 'textfield',
                                                anchor: '100%',
                                                fieldLabel: 'Bar'
    See this URL : -

    Steps to reproduce the problem:
    • Open the example above in both IE and Firefox
    • Uncheck the checkbox

    The result that was expected:
    • Both the elements and their labels become disabled

    The result that occurs instead:
    • In Firefox, the elements disable correctly, but their labels do not disable or "gray out"

    Screenshot or Video:
    • attached

    Debugging already done:
    • Using Firebug and IE's Developer Tools, I see only the <input ..> element gets the "x-item-disabled" class
    • It would appear that IE treats the "for" attribute in the label as two-way, where if it's target element becomes disabled/enabled, so too does the label.

    Possible fix:
    • Still quite new to Ext, so I don't have any suggestions to the core itself
    • I'm going to try extending a FormPanel to have an option to force enabling/disabling the labels explicitly

  2. #2
    Sencha User
    Join Date
    Mar 2013
    Vote Rating
    Esha is on a distinguished road



    I am facing the same problem.
    But i want field label to be displayed as enabled in IE8.
    I mean I want field label to be displayed in IE as it is displayed in FF.

Thread Participants: 1