[4.1 RC1] setFieldLabel on fieldcontainer error in Firefox

[joseph09]

REQUIRED INFORMATION


Ext version tested:

• Ext 4.1 RC1

Browser versions tested against:

• FF11.0
• IE9
• Chrome

Description:

• When calling setFieldLabel on a field container in FireFox the fields overlap the label. Works fine in IE & Chrome

Test Case:

   
Ext.onReady(function() {
    Ext.QuickTips.init();

    var form = Ext.create('Ext.form.Panel', {
        renderTo: 'docbody',
        title   : 'FieldContainers',
        autoHeight: true,
        width   : 600,
        bodyPadding: 10,
        defaults: {
            anchor: '100%',
            labelWidth: 100
        },
        items   : [{
                        xtype: 'fieldcontainer',
                        fieldLabel: 'Phone',
                        id: 'phone',
                        combineErrors: true,
                        msgTarget: 'under',
                        layout: 'hbox',
                        defaults: {
                            hideLabel: true
                        },
                        items: [
                            {xtype: 'displayfield', value: '('},
                            {xtype: 'textfield',    fieldLabel: 'Phone 1', name: 'phone-1', width: 29, allowBlank: false},
                            {xtype: 'displayfield', value: ')'},
                            {xtype: 'textfield',    fieldLabel: 'Phone 2', name: 'phone-2', width: 29, allowBlank: false, margins: '0 5 0 0'},
                            {xtype: 'displayfield', value: '-'},
                            {xtype: 'textfield',    fieldLabel: 'Phone 3', name: 'phone-3', width: 48, allowBlank: false}
                        ]
                    }
        ]
    });
    
    
    Ext.getCmp('phone').setFieldLabel('New Phone Label');
    
});

HELPFUL INFORMATION


Screenshot:
setFieldLabel_bug.jpg

[mitchellsimoens]

Thanks for the report. Also happening in FF10

[rhamflett]

I've just run into this too. I didn't try RC1 but I've just upgraded to RC2 and this is now a problem for me.

Works OK on:
Internet Explorer 9.0.8.16421
Safari 5.1.2 (7534.52.7)
Opera 11.60 (build 1185)

Error occurs on:
Firefox 9.0.1 (Firebug 1.9.0)
Chrome 16.0.912.75m

Thanks,
Rob

[joseph09]

Yes this bug still exists in RC2 and affects fields as well as fieldcontainers.

The solution I used is this override -

Ext.override(Ext.form.field.Base, {
    setFieldLabel: function($Label) {
        this.fieldLabel = $Label;
        Ext.get(this.getEl().query("label")[0]).update(this.fieldLabel+this.labelSeparator);
    }
});

The solution is from this thread -
http://www.sencha.com/forum/showthre...=setFieldLabel

[mitchellsimoens]

Please note you should use Ext.define instead.

Ext.define('Override.form.field.Base', {
    override : 'Ext.form.field.Base',

    setFieldLabel: function(label) {
        this.fieldLabel = label;

        Ext.get(this.getEl().query("label")[0]).update(label + this.labelSeparator);
    }
});

[joseph09]

The solution I posted above no longer seems to be working for me.

Anyone have a better suggestion?

Was really hoping this bug would have been fixed in RC2.

[rhamflett]

Sorry, I made a slight mistake in my list of tested browsers. Opera and Chrome and were the wrong way round. The list should be:

Works OK on:
Internet Explorer 9.0.8.16421
Safari 5.1.2 (7534.52.7)
Chrome 16.0.912.75m


Error occurs on:
Firefox 9.0.1 (Firebug 1.9.0)
Opera 11.60 (build 1185)

I tried editing my original post but nothing happens when I click save (on Firefox and Chrome)

[rhamflett]

This appears to have been fixed in RC3.