PDA

View Full Version : Simple override for marking required fields



zhegwood
7 Oct 2009, 2:12 PM
You'll just need to add 'required:true' to the field config and optionally a reqCfg param if you don't want a red asterisk. Seems useful so I thought I'd share.



Ext.override(Ext.form.Field,{
/*
* true if field is required
*/
required: false,

/*
* default required marker is a red asterisk
*/
reqCfg: { tag: "span",style: "color:#f00;padding-left:2px;",html: "*" },

onRender : function(ct, position){
if(!this.el){
var cfg = this.getAutoCreate();
if(!cfg.name){
cfg.name = this.name || this.id;
}
if(this.inputType){
cfg.type = this.inputType;
}
this.autoEl = cfg;
}
Ext.form.Field.superclass.onRender.call(this, ct, position);

var type = this.el.dom.type;
if(type){
if(type == 'password'){
type = 'text';
}
this.el.addClass('x-form-'+type);
}
if(this.readOnly){
this.el.dom.readOnly = true;
}
if(this.tabIndex !== undefined){
this.el.dom.setAttribute('tabIndex', this.tabIndex);
}

this.el.addClass([this.fieldClass, this.cls]);

if (this.required) {
var dh = Ext.DomHelper;
dh.append(this.el.dom.parentNode,this.reqCfg);
}
}
});

jmariani
18 Oct 2009, 10:41 AM
Nice, but beware: It puts the asterisk on hidden fields and the asterisk is misaligned on combo boxes and checkboxes (didn't tried with other type of fields)

jasonb885
25 Dec 2009, 1:30 PM
I picked this or something like it up somewhere on the forums. It simply modifies the label, which should always align correctly:



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.requiredField === true) {
c.fieldLabel = c.fieldLabel + " <span class=\"req\">*</span>";
}
this.originalRenderItem.apply(this, arguments);
}
});

cbetancourt
26 May 2010, 5:49 PM
@jsonb885: Small mod to yours. I replaced c.requiredField with c.allowBlank and avoid hidden fields.
I've also wrapped the field label in the span. CSS is applied to the field instead of using an asterisk.


Ext.apply(Ext.layout.FormLayout.prototype, {
originalRenderItem: Ext.layout.FormLayout.prototype.renderItem,
renderItem: function(c, position, target) {
if (c && !c.rendered && c.isFormField && !c.allowBlank && c.inputType!=='hidden') {
c.fieldLabel = '<span class=\"x-required\">' + c.fieldLabel + '</span>';
}
this.originalRenderItem.apply(this, arguments);
}
});


/* CSS */
.x-required {
font-weight: bold;
color: #15428b;
}

wemerson.januario
26 May 2010, 8:05 PM
both good

jmaia
23 Jan 2012, 4:43 AM
Hi,

Anyone has a Ext JS 4.0 version for this ?

Joao Maia