Formular Validator
Diese Komponente unterstützt die Visualisierung von Validierungsfehlern in Formularen. Sie zeigt über eine Schaltfläche an, ob alle Formularfelder frei von Validierungsfehlern sind. Wenn ein oder mehr Felder Validierungsfelder aufweisen, so wird die farbig signalisiert. Außerdem wird die Anzahl der Fehler angezeigt. Bewegt man die Maus über die Schaltfläche, werden weitere Informationen angezeigt. Klickt man auf die Schaltfläche, so werden kurzzeitig alle fehlerhaften Felder hervorgehoben.
Siehe auch Feature - Formular Validator
Verwendung
Diese Komponente kann in jedem Ext.panel.Panel als ExtJS Plugin verwendet werden.
Diese müssen mindestens das Interface Ext.form.field.Field umsetzen.
Plugin definition inkl. allen möglichen Konfigurationsparametern
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
}
}
// ...
});Beispiel mit zwei 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
}
}
}
];
Keywords:
