Form Validator
This component supports the visualization of validation errors in forms. It uses a button to indicate whether all form fields are free of validation errors. If one or more fields contain validation errors, this is indicated by a color. The number of errors is also displayed. Hovering the mouse over the button displays additional information. If you click the button, all fields with errors are briefly highlighted.
See also Feature - Form Validator
Usage
This component can be used as an ExtJS plugin in any Ext.panel.Panel.
These must implement at least the Ext.form.field.Field interface.
Plugin definition, including all possible configuration parameters
Ext.define("",{
// ...
plugins: {
bpcFieldValidator: {
/**
* ComponentQuery string to find the validationButton
*/
validationButtonSelector : "#formChecker",
/**
* Components witch match this query will be enabled/disabled regarding the validation state
*/
enableComponentsSelector : "[enableOnValidForm=true]",
/**
* If true the plugin try to inject a button in a toolbar
*/
autoInjectValidationButton : false,
/**
* Trigger invalidation mark on hightlight.
*/
markInvalidOnHighlight : false
}
}
// ...
});Example with two panels
var items = [
{
xtype: "panel",
title:"Injected in Toolbar",
tbar: [], // we need at least one toolbar, bbar, buttons or any other toolbar within this panel are fine
plugins: {
bpcFieldValidator: {
autoInjectValidationButton: true
}
}
},
{
xtype: "panel",
title:"Custom btn via default itemId",
tbar: [
{
xtype: "button",
iconCls: "x-fal fa-fire",
text: "this text will be overridden by the plugin",
itemId: "formChecker" // this is the default itemId
}
],
plugins: {
bpcFieldValidator: {
markInvalidOnHighlight: true, // triggers also the field validation error msg
validationButtonSelector: "#formChecker" // this is the default value in bpcFieldValidator
}
}
}
];Sourcehttps://bitbucket.org/virtimo/bpc-fe-demo/src/support/4.1.x/packages/local/demo/src/view/components/FieldValidator.js#FieldValidator.js[code]
Keywords:
