Ext JS .pl - Ext JS po polsku

Formularz

Pierwszą rzeczą którą musimy zrobić to po prostu stworzyć nasz formularz, można to porównać do wpisania tagów <form> w HTML.

var form_pracownik = new Ext.form.Form({
labelAlign: 'right',
labelWidth: 175,
buttonAlign: 'right'
});

Tworzenie pól formularza

Nasz przykładowy formularz będzie się składał z czterech pól: nazwisko, stanowisko, data_zatrudnienia i status. Pierwsze dwa, nazwisko i stanowisko będą polami tekstowymi, czyli TextField.

Ważną opcją konfiguracyjną jest tu name, który jest odpowiednikiem HTML-owego atrybutu name służącego do nazwania pola.

var pracownik_nazwisko = new Ext.form.TextField({
fieldLabel: 'Nazwisko',
name: 'nazwisko',
width: 190
});

var pracownik_stanowisko = new Ext.form.TextField({
fieldLabel: 'Stanowisko',
name: 'stanowisko',
width: 190
});

Następne pole to data_zatrudnienia, użyjemy więc pola DateField, które wygeneruje nam elegancki kalendarz do wyboru daty.

Opcja konfiguracyjna dotycząca formatu daty używa tej samej składni co funkcja date() w PHP. Powinieneś więc ustawić taki format daty jakiego używasz w swojej aplikacji, czy w bazie danych. Pojawia się tu też parametr allowBlank, który służy do określenia czy formularz ma wymagać wypełnienia tego pola czy nie.

var pracownik_data_zatrudnienia = new Ext.form.DateField({
fieldLabel: 'Data zatrudnienia',
name: 'data_zatrudnienia',
width: 90,
allowBlank: false,
format:'Y-m-d'
});

Nasze ostatnie pole to status (określające czy pracownik jest aktywny czy nie), przechowuje ono wartość logiczną (prawda lub fałsz). Użyjemy więc kontrolki Checkbox.

var pracownik_status = new Ext.form.Checkbox({
fieldLabel: 'Aktywny?',
name: 'status'
});

Poskładajmy to w całość

Teraz dodamy nasze zdefiniowane już pola do fieldsetu, który wstawi je do formularza. Można też użyć metody add zamiast fieldsetu.

form_pracownik.fieldset(
{legend:'Edycja danych pracownika'},
pracownik_nazwisko,
pracownik_stanowisko,
pracownik_data_zatrudnienia,
pracownik_status
)

Teraz dodamy jeszcze guzik wysyłający formularz. Użyjemy do tego celu metody addButton i dodamy odrobinę kodu sprawdzającego w momencie kliknięcia guzika poprawność danych wprowadzonych do formularza. Na koniec wywołujemy metodę render przekazując jej id div-a (pracownik-form) wewnątrz którego formularz zostanie wyrenderowany.

form_employee.addButton('Zapisz', function(){
if (form_pracownik.isValid()) {
Ext.Msg.alert('Sukces', 'Formularz wypełniony prawidłowo!.');
}else{
Ext.Msg.alert('Błąd', 'Popraw zaznaczone błędy!');
}
}, form_pracownik);

form_pracownik.render('pracownik-form');

Co dalej?

Mamy formularz, ale taki który nic nie robi - czyli coś w rodzaju samochodu bez silnika. Dlatego już wkrótce kolejny tutorial poświęcony formularzom, w którym pokażę jak pobrać z serwera dane i wpisać je do formularza oraz jak wysłać dane z formularza na serwer.