Ext JS 4 Custom Validation: tworzenie własnej walidacji vtype

Ext JS 4 Custom Validation: tworzenie własnej walidacji vtype

Witam, w tym artykule pokażę ci jak w architekturze MVC tworzyć swoje vtypes. Artykuł składa się z dwóch części, pierwsza pokazuje jak użyć wbudowaną już walidację a drugi demonstruje custom vtype. Dla przykładu użyłem jak zazwyczaj utworzonej w tym artykule struktury:

Tworzenie pełnoekranowej aplikacji Ext JS 4 z BorderLayout

Oczywiście możesz użyć własnych komponentów. W przykładzie zastosowałem moduł użytkowników i formę, która wygląda jak poniżej:

22-extjs4

Kod źródłowy powyższej formy wygląda następująco:

Ext.define('DevJS.view.users.Add', {
    extend: 'Ext.window.Window',
    alias: 'widget.usersAdd',

    height: 225,
    width: 369,
    resizable: false,
    title: 'Add user',
    modal: true,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'form',
                    bodyPadding: 20,
                    title: '',
                    defaults: {
                        allowBlank: false,
                        allowOnlyWhitespace: false,
                        msgTarget: 'side',
                        xtype: 'textfield',
                        anchor: '100%'
                    },
                    items: [
                        {
                            fieldLabel: 'Login',
                            name: 'login',
                            minLength: 4
                        },
                        {
                            fieldLabel: 'First Name',
                            name: 'firstName'
                        },
                        {
                            fieldLabel: 'Last Name',
                            name: 'lastName'
                        },
                        {
                            fieldLabel: 'Email',
                            name: 'email',
                            vtype: 'email'
                        },
                        {
                            fieldLabel: 'PIN Number',
                            name: 'pin',
                            minLength: 4,
                            maxLength: 4,
                            vtype: 'pin'
                        },
                        {
                            xtype: 'button',
                            anchor: 0,
                            itemId: 'save',
                            text: 'Save'
                        },
                        {
                            xtype: 'button',
                            anchor: 0,
                            itemId: 'cancel',
                            text: 'Cancel'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});

//obiekt defaults jest bardzo przydatny, powinieneś go używać aby sprawić kod bardziej elastycznym i jak wiesz, dobra praktyka to pisać mniej a robić więcej. Obiekt defaults przypisuje wartości do tablicy items a nie do kontenera

Forma z przykładu posiada pięć pól. Pierwsza część pokryje pole email z wbudowaną walidacją a druga zajmie się polem PIN.

Część 1, wbudowana walidacja

Framework Ext JS4 ma w kieszeni kilka typów walidacji. Jednym z nich jest email:

                        {
                            fieldLabel: 'Email',
                            name: 'email',
                            vtype: 'email'
                        }

Inne typy to:

a) alpha

b) alphanum

c) url

Aby ustawić walidację wystarczy dodać do definicji pola zmienną vtype. W naszym przypadku będzie to ‘email’ i to wszystko. Wiadomość o niepoprawnej wartości pojawi się automatycznie.

Na przykład tak jak tutaj:

23-extjs4

Część 2, własny typ walidacji

Aby pokazać ci tworzenie własnych walidacji utworzyłem nową ‘pin’. Ta walidacja będzie obsługiwać wszystkie pola PIN. Dla przykładu niektóre banki nie pozwalają w swoim kodzie pin używać takich samych liczb (takich jak 1111, 2222, itd.). Aby tego dokonać musimy przypisać nową funkcję do obiektu Ext.form.field.VTypes.

//Ext.form.field.VTypes jest to obiekt singleton

Dobrym sposobem jest utworzenie nowego pliku o nazwie VTypes.js w katalogu lib, który w moim przypadku znajduje się w app/lib/form/field a kod wygląda jak poniżej:

Ext.define('DevJS.lib.form.field.VTypes', {

    pin: /(?!(.)\1\1).{3}/,

    init: function () {
        var me = this;

        //pin number
        this.pinFn();
        //etc..
    },
    pinFn:function () {
        var me = this;

        Ext.apply(Ext.form.field.VTypes, {
            pin:function (val, field) {
                //check value
                return me.pin.test(val);
            },
            pinText: 'Wrong PIN number (numbers cannot be identical)'
        });
    }
});

Ważna kwestia tutaj jest taka aby przedrostek zmiennej Text nazywał się tak samo jak funkcja, w tym przypadku jest to pinText. A wynik twojej funkcji powinien zwracać true (poprawnie) lub false (niepoprawnie). Jeśli chcesz możesz inicjalizować kolejne vtype w funkcji init.

Aby zaimplementować twoj plik otwórz klasę DevJS.Application (app/application.js). Następnie dodaj do funkcji launch następującą linię:

Ext.create('DevJS.lib.form.field.VTypes').init();

i proszę dodaj do tablicy requires string z nazwą pliku:

requires: [
    'DevJS.lib.form.field.VTypes'
 ]

Teraz twój custom type powinien być już zaimplementowany i możesz spokojnie dodać do textfield nową walidację ‘pin’.

{
    fieldLabel: 'PIN Number',
    name: 'pin',
    minLength: 4,
    maxLength: 4,
    vtype: 'pin'
}

Rezultat wygląda następująco:

24-extjs4

Jak zobaczyłeś działa całkiem fajnie i może zostać użyte w innych formach twojej aplikacji lub skopiowane i użyte w innym projekcie.

W przykładzie nie sprawdziliśmy czy użytkownik wprowadził tylko liczby. Możesz oczywiście dodać to do tej walidacji ale powinno się mieć osobną walidację do liczb aby można było ją łatwiej użyć w innym miejscu.

Jak zatem użyć kilku walidacji jednocześnie w Ext JS4?

Pokażę ci w jednym z moich następnych artykułów. Utworzę przykład z implementacją kilku walidacji w jednym polu. Ponieważ w danym momencie obiekt formy Ext JS 4 jest w stanie operować tylko na jednym vtype. Dzięki i do później.

Edytowane: Multiple validation: wiele vtype dla textfield w Ext JS 4

Komentarze:

Zostaw odpowiedź

Proszę wypełnij wymagane pola aby dodać komentarz.


Drag circle to the rectangle on the right!

Wyślij