form | Marcus Schiesser

I just had the requirement to mark required fields in a ExtJS form. I started with the code from Jason (Thanks!) and extended it a bit.
Now you may customize how the field marker would look like by assigning a CSS class to a requiredFieldCls property. I also added a descriptive tooltip for the marker.
Here’s the code:

Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'under';
    Extensive.components.RequiredFieldInfo.prototype.requiredFieldText = 'These are really important things';
    
    var panel = new Ext.FormPanel({
        frame: true,
        labelWidth: 130,
        width: 350,
        
        items: [{
            xtype: 'textfield',
            fieldLabel: 'This you might tell me',
            anchor: '100%'
        }, {
            xtype: 'textfield',
            fieldLabel: 'This I have to know',
            allowBlank: false,
            anchor: '100%',
            blankText: 'As said, I have to know this!'
        }, {
            xtype: 'reqFieldInfo'
        }]
    });
    var element = Ext.query('script[src$=required-field.js]')[0];
    var renderElement = element.parentNode;
    panel.render(renderElement);
});

Ext.onReady(function(){

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'under';

Extensive.components.RequiredFieldInfo.prototype.requiredFieldText = 'These are really important things';

var panel = new Ext.FormPanel({

frame: true,

labelWidth: 130,

width: 350,

items: [{

xtype: 'textfield',

fieldLabel: 'This you might tell me',

anchor: '100%'

}, {

xtype: 'textfield',

fieldLabel: 'This I have to know',

allowBlank: false,

anchor: '100%',

blankText: 'As said, I have to know this!'

}, {

xtype: 'reqFieldInfo'

}]

});

var element = Ext.query('script[src$=required-field.js]')[0];

var renderElement = element.parentNode;

panel.render(renderElement);

});

Dont’ forget to also include these necessary modifications to Ext.layout.FormLayout:

Ext.ns('Extensive.components');

Ext.apply(Ext.layout.FormLayout.prototype, {
    originalRenderItem: Ext.layout.FormLayout.prototype.renderItem,
    renderItem: function(c, position, target){
        if (c && !c.rendered && c.isFormField && c.fieldLabel && !c.allowBlank) {
            c.fieldLabel = c.fieldLabel + " <span " +
            ((c.requiredFieldCls !== undefined) ? 'class="' + c.requiredFieldCls + '"' : 'style="color:red;"') +
            " ext:qtip=\"" +
            ((c.blankText !== undefined) ? c.blankText : "This field is required") +
            "\">*</span>";
        }
        this.originalRenderItem.apply(this, arguments);
    }
});

Extensive.components.RequiredFieldInfo = Ext.extend(Ext.form.Label, {
    constructor: function(config){
        Extensive.components.RequiredFieldInfo.superclass.constructor.call(this, Ext.apply({
            html: "<span " +
            ((this.requiredFieldCls !== undefined) ? 'class="' + this.requiredFieldCls + '"' : 'style="color:red;"') +
            '>*</span> ' +
            ((this.requiredFieldText !== undefined) ? this.requiredFieldText : 'Required field')
        }, config));
    }
});
Ext.reg('reqFieldInfo', Extensive.components.RequiredFieldInfo);

Ext.ns('Extensive.components');

Ext.apply(Ext.layout.FormLayout.prototype, {

originalRenderItem: Ext.layout.FormLayout.prototype.renderItem,

renderItem: function(c, position, target){

if (c && !c.rendered && c.isFormField && c.fieldLabel && !c.allowBlank) {

c.fieldLabel = c.fieldLabel + " <span " +

((c.requiredFieldCls !== undefined) ? 'class="' + c.requiredFieldCls + '"' : 'style="color:red;"') +

" ext:qtip=\"" +

((c.blankText !== undefined) ? c.blankText : "This field is required") +

"\">*</span>";

}

this.originalRenderItem.apply(this, arguments);

}

});

Extensive.components.RequiredFieldInfo = Ext.extend(Ext.form.Label, {

constructor: function(config){

Extensive.components.RequiredFieldInfo.superclass.constructor.call(this, Ext.apply({

html: "<span " +

((this.requiredFieldCls !== undefined) ? 'class="' + this.requiredFieldCls + '"' : 'style="color:red;"') +

'>*</span> ' +

((this.requiredFieldText !== undefined) ? this.requiredFieldText : 'Required field')

}, config));

}

});

Ext.reg('reqFieldInfo', Extensive.components.RequiredFieldInfo);

From know on you can find this code and all my other ExTJS components bundled in a library called ‘extensive’ – hosted at Google Code. Feel free to support the project by participating.

Actually it is pretty easy to get the values of all fields of a form in Ext: You just have to call the getValues() method of the BasicForm.
The problem with that approach is that it just takes the values directly from the DOM and is not calling the getValue() for each field (Which I assumed). One consequence is that you don’t get the values of combo boxes, but their labels.
To get the real values, I just did the following:

Firstly, I retrieved an array of all fields of the form:

var fields = that.findBy(function(comp) {
	return comp.xtype != 'fieldset';
});

var fields = that.findBy(function(comp) {

return comp.xtype != 'fieldset';

});

(In my case these were just all children that were no fieldsets. You might have to change the condition above to suit your needs.)

Then, I just iterated over all fields and added the name/value pair to a result object:

var result = {};
fields.forEach(function(field){
	var name = field.getName();
	var value = field.getValue();
	result[name] = value;
});

var result = {};

fields.forEach(function(field){

var name = field.getName();

var value = field.getValue();

result[name] = value;

});

That’s it – now result contains the real values of all fields.

Tag: form

Mark Required Fields in a ExtJS Form

Getting values from a form containing combos in Ext