Ext JS 4: Labelable Before and After Quick Ref

There are a handful of config options available on the Labelable mixin to add strings or XTemplates before or after the label/element. Here is a quick visual reference for which option will end up where on a textfield.


For some reason, my “afterBodyEl” would not show, but I assume it would be before “afterSubTpl”.

Version Info:
Ext JS 4.1.1


Ext JS Disabling Form Field Labels

Making a form field label look disabled when the form field is disabled by adding an override to Ext JS.

Ext.override(Ext.form.Field, {
    onDisable : function(){;
        if(this.getItemCt) {
            var label = this.getItemCt().child('label');
            if (label) label.addClass(['find-label-disabled', 'x-item-disabled']);
    onEnable : function(){;
        if(this.getItemCt) {
            var label = this.getItemCt().child('label');
            if(label) label.removeClass(['find-label-disabled', 'x-item-disabled']);

In this specific case, I had to add

	.find-label-disabled {
		background-color: white;

since the background was white and I didn’t want funny green text.

Unfortunately, I no longer have the link to the posting in the Ext JS forums.

ExtJS Hiding form field labels along with the field

Seems obvious, doesn’t it? You want to hide a field on your ExtJS FormPanel and you do, but the label is still there. There are a few threads on the ExtJS forum about this, ranging from overrides to simple code solutions. The idea behind the code is this: hide the field and the div that contains the label by walking up the dom

field.hide() //or setVisible(false), whatever you are looking for

And some links to the forums to get started finding some overrides…
How to display a hidden label
Hiding the combobox and the label sometime