Results 1 to 2 of 2

Thread: [OPEN-832] IE8 / FF3 disabled fieldLabel difference

    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
    Posts
    32
    Vote Rating
    0
      0  

    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



    Description:

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



    Test Case:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <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">
                Ext.onReady(function(){
                    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) {
                                                Ext.getCmp('id-opts').enable();
                                            }
                                            else {
                                                Ext.getCmp('id-opts').disable();
                                            }
                                        }
                                    },
                                    { 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'
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    });
                });
            </script>
    
        </head>
        <body>
        </body>
    </html>
    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
    Location
    India
    Posts
    17
    Vote Rating
    0
      0  

    Default

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •