Muszę zaimplementować komunikaty sprawdzania poprawności, które pojawią się tuż obok nieprawidłowego pola. Każda pomoc będzie doceniona.ExtJS4: Jak wyświetlić komunikat o błędzie sprawdzania poprawności obok pola tekstowego, combobox itp.
msgTarget: 'side' pokaże ikonę błędu po prawej stronie pola, wyświetlając komunikat w okienku podręcznym po najechaniu kursorem.
jeśli uważnie zapoznać się z dokumentacją, jeszcze jedna opcja jest dla msgTarget http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Text-cfg-msgTarget
[id elementu] Dodaj informację o błędzie bezpośrednio do innerHTML określonego elementu. musisz dodać "td" po prawej stronie kontrolki dynamicznie z identyfikatorem. wtedy jeśli podasz msgTarget: 'element id', to zadziała.
Zobacz konfigurację kontrolki msgTarget. msgTarget: 'side' umieści komunikat sprawdzania poprawności po prawej stronie formantu.
Dzięki za odpowiedź, ale ta opcja umieszcza tylko ikonę wykrzyknika na prawo od kontrolki, ale nie wiadomość. Potrzebuję wiadomości, a nie jako etykiety narzędzia. – berliner
Urządzenie może działać, ale wydaje się być bardzo ograniczone, szczególnie gdy chcemy mieć wiele instancji jednego komponentu ExtJs wielokrotnego użytku (a tym samym wielu wystąpień tego samego elementu msgTarget). Na przykład mam edytor stylów MDI, w którym można otworzyć wiele edytorów jednego typu w interfejsie kart. Nie działa też z itemId ani nie rozpoznaje hierarchii DOM/kontenera.
I tak wolę wyłączyć domyślną obsługę, jeśli nie chcę dokładnie jednej z wbudowanych opcji wyświetlania komunikatów, ustawiając msgTarget: none, a następnie wykonując mój własny komunikat komunikacyjny, obsługując zdarzenie fielderrorchange, które zostało zaprojektowane dla dokładnie tego scenariusza . W tym przypadku mogę teraz uszanować hierarchię moich formularzy nawet przy wielu wystąpieniach tej samej formy edytora, ponieważ mogę wybrać element wyświetlania błędu względem edytora.
Oto jak to zrobić:
{
xtype: 'fieldcontainer',
fieldLabel: 'My Field Label',
layout: 'hbox', // this will be container with 2 elements: the editor & the error
items: [{
xtype: 'numberfield',
itemId: 'myDataFieldName',
name: 'myDataFieldName',
width: 150,
msgTarget: 'none', // don't use the default built in error message display
validator: function (value) {
return 'This is my custom validation message. All real validation logic removed for example clarity.';
}
}, {
xtype: 'label',
itemId: 'errorBox', // This ID lets me find the display element relative to the editor above
cls: 'errorBox' // This class lets me customize the appearance of the error element in CSS
}],
listeners: {
'fielderrorchange': function (container, field, error, eOpts) {
var errUI = container.down('#errorBox');
if (error) {
// show error element, don't esape any HTML formatting provided
errUI.setText(error, false);
errUI.show();
} else {
// hide error element
errUI.hide();
}
}
}
}
Skorzystaj msgTarget 'strona' walidacji w prawym boku i msgTarget 'pod' dla dolnego
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
allowBlank: false,
name: 'name',
msgTarget: 'side',
blankText: 'This should not be blank!'
}]
Można użyć „msgTarget: [id elementu ] ". Musisz napisać html, aby użyć id elementu zamiast itemId. Funkcja sprawdzania poprawności dodaje element listy pod elementem ustawionym jako "msgTarget". Jeśli chcesz pokazać elementy, które chcesz do sprawdzenia poprawności, możesz przekazać html zamiast tylko tekst.
{
xtype: 'container',
items: [
{
xtype: 'textfield',
allowBlank: false,
msgTarget: 'hoge'
blankText: '<div style="color:red;">validation message</div>', // optional
},
{
xtype: 'box',
html: '<div id="hoge"></div>' // this id has to be same as msgTarget
}
]
}
Aby wyświetlić komunikat o błędzie w/stronie polu tekstowym wejście, msgTarget nieruchomość będzie działać tylko w przypadku korzystania z układu formularza.
Aby obejść to w układzie innym niż formularz, musimy zawinąć element w klasę "x-form-field-wrap".
można znaleźć bardziej na wątku: https://www.sencha.com/forum/showthread.php?86900-msgTarget-under-problem
to prosto z przykładów. będziesz lepiej obsługiwany przez nich. – dbrin
@DmitryB, dzięki za odpowiedź. Czy możesz podać mi jakieś przykłady? Przeczytaj mój komentarz do JohnnyHK poniżej. – berliner
Odzyskuję mój komentarz. Jedynym sposobem wyświetlenia pełnego komunikatu o błędzie po wyjęciu z pudełka jest "under" msgTarget - patrz pole Telefon w tym przykładzie: http: //docs.sencha.com/ext-js/4-1/#!/example/form/fieldcontainer.html @Jomet poniżej wspomniany element jest trochę więcej pracy, ale to właśnie musisz zrobić. – dbrin