Hi
If you want to show mandatory fields in red to visually distinguish mandatory fields and optional fields, you can do this override.
In your CSS stylesheet
.error {
background-color: #ffeeee !important;
border-color: #ff7870 !important;
}
.custom-form-item {
display: block;
margin-bottom: 0px;
zoom: 1;
}
.custom-form-text {
border: 1px solid #B5B8C8;
padding: 1px 3px;
height: 22px !important;
}
In your javascript
/*
* We overrides the Ext's FormPanel because there's a but using IE7-8, FormPanel and textfields (and derivatives).
* IE try to render the field but the bottom and top border and invisible. We need to override the border width...
*/
Ext.override(Ext.form.FormPanel, {
initFields : function() {
var f = this.form;
var formPanel = this;
var fn = function(c) {
if (c.isFormField) {
f.add(c);
} else if (c.doLayout && c != formPanel) {
Ext.applyIf(c, {
labelAlign: c.ownerCt.labelAlign,
labelWidth: c.ownerCt.labelWidth,
itemCls: c.ownerCt.itemCls
});
if (c.items) {
c.items.each(fn);
}
}
};
this.items.each(fn);
}
});
/**
* Override the Ext.form.Field to add some functionalities like max lenght...
* @author Yann Laviolette
*
*/
Ext.override(Ext.form.Field, {
onRender : function(ct, position) {
/**
* If we specify a maxLenght for a field, the field doesn't accept more than X characters...
*/
if (this.maxLength !== Number.MAX_VALUE && (this.getXType() === 'textfield' || this.getXType() === 'numberfield')) {
this.autoCreate = {
tag: 'input',
type: 'text',
size: '20',
autocomplete: 'off',
maxlength: this.maxLength
};
}
if (this.maxLength !== Number.MAX_VALUE && (this.getXType() === 'textarea')) {
this.autoCreate = {
tag: 'textarea',
type: 'text',
size: '20',
autocomplete: 'off',
maxlength: this.maxLength,
onkeyup: "if (this.value.length > " + this.maxLength + ") { this.value = this.value.slice(0, " + this.maxLength + ") }",
onchange: "if (this.value.length > " + this.maxLength + ") { this.value = this.value.slice(0, " + this.maxLength + ") }"
};
}
Ext.form.Field.superclass.onRender.call(this, 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.el = ct.createChild(cfg, position);
}
var type = this.el.dom.type;
if (type) {
if (type == 'password') {
type = 'text';
}
if (type == 'text') {
this.el.addClass('custom-form-' + type);
} else {
this.el.addClass('x-form-' + type);
}
}
this.invalidClass = "error";
if(!this.allowBlank){
this.cls = "error";
}
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]);
},
/**
* Show the container including the label
*/
showContainer: function() {
this.enable();
this.show();
if (!Ext.isEmpty(this.getEl())) {
this.getEl().up('.x-form-item').setDisplayed(true); // show entire container and children (including label if applicable)
}
},
/**
* Hide the container including the label
*/
hideContainer: function() {
this.disable(); // for validation
this.hide();
if (!Ext.isEmpty(this.getEl())) {
this.getEl().up('.x-form-item').setDisplayed(false); // hide container and children (including label if applicable)
}
},
/**
* Hide / Show the container including the label
* @param visible
*/
setContainerVisible: function(visible) {
if (this.rendered) {
if (visible) {
this.showContainer();
} else {
this.hideContainer();
}
}
return this;
}
});