Jak zaimplementować powiązanie danych w Ext.js: praktyczny przewodnik

Witamy w naszym praktycznym przewodniku, jak sprawić, by powiązanie danych działało w Ext.js JavaScript Framework! Wiązanie danych jest jak magiczny klej, który łączy wygląd Twojej witryny z tym, co się w niej zmienia. Ext.js JavaScript Framework to fajne narzędzie, które pomaga to łatwo zrobić. Na tym blogu przeprowadzimy Cię przez cały proces w prostych krokach. Niezależnie od tego, czy jesteś zawodowym programistą, czy dopiero zaczynasz, omówimy podstawy.

Dowiesz się, jak łączyć dane z częściami Ext.js JavaScript Framework, aby Twoja witryna mogła sprawnie reagować i aktualizować się. Na koniec będziesz mieć umiejętności umożliwiające uczynienie aplikacji internetowych bardziej interaktywnymi i dynamicznymi. Zacznijmy od powiązania danych Ext.js!

Co to jest powiązanie danych?

Wiązanie danych jest jak pomocne ogniwo pomiędzy wyglądem strony internetowej a tym, co może się w niej zmienić. Wyobraź sobie to jako magiczne połączenie, które zapewnia płynną współpracę witryny i danych. Tak więc, gdy coś zmieni się w danych, np. cena lub nazwa, witryna internetowa automatycznie wyświetli tę zmianę, bez konieczności podejmowania jakichkolwiek działań.

W Ext.js, który jest zestawem narzędzi dla twórców stron internetowych, dostępna jest fajna funkcja zwana dwukierunkowym wiązaniem danych. Oznacza to, że gdy zrobisz coś na stronie internetowej, na przykład klikniesz przycisk lub wpiszesz coś w polu, dane zostaną zaktualizowane. A gdy dane się zmienią, natychmiast aktualizuje stronę internetową. Dzięki temu Twoja witryna będzie bardziej interaktywna i responsywna.

Jakie jest znaczenie wiązania danych w tworzeniu stron internetowych?

Wiązanie danych jest niezwykle ważne w tworzeniu stron internetowych, ponieważ zapewnia dopasowanie wyglądu witryny do zmieniających się danych bez konieczności robienia tego wszystkiego ręcznie. Sprawia, że ​​aplikacje internetowe i mobilne są znacznie bardziej dynamiczne i responsywne, oszczędzając czas i wysiłek programistów potrzebnych na pisaniu złożonego kodu.

Dwukierunkowe wiązanie danych w Ext.js.

Wszystkie typy powiązań w Ext JS i Sencha Touch działają według znanego procesu: używają ustawiaczy i aktualizacji. Wiązanie jednokierunkowe oznacza, że ​​gdy coś zmieni się w ViewModel, aktualizuje konfigurację za pomocą swojego settera. Wiązanie dwukierunkowe jest podobne, ale używa modułu aktualizującego, który działa jak specjalny moduł obsługi. Jeśli aktualizator pomyślnie zmieni konfigurację, zmienia także połączoną wartość w ViewModel, co aktualizuje inne powiązania.

Aby konfiguracja obsługiwała wiązanie dwukierunkowe, możesz użyć opcji „twoWayBindable”. Zwykle używa się go za kulisami, ale może być przydatny podczas tworzenia niestandardowych widoków lub komponentów. Na przykład Ext.field.Text konfiguruje swoją „wartość” tak, aby można ją było powiązać dwukierunkowo w następujący sposób:

twoWayBindable: {

wartość: 1

}

W przykładzie z polem obrotowym zmiana jego wartości uruchamia program aktualizujący, który przechwytuje ViewModel. To następnie aktualizuje zawartość poniższego kontenera, a wszystko dlatego, że konfiguracja „html” jest połączona. Działa to płynnie, ponieważ Ext.field.Spinner jest powiązany z Ext.field.Text, który jest skonfigurowany do pracy z dwukierunkowym wiązaniem dla swojej „wartości”.

Jak zainstalować i skonfigurować Ext.js w środowisku programistycznym?

Aby uzyskać wersję próbną plików biblioteki Ext JS, odwiedź witrynę Sencha pod adresem https://www.sencha.com. Po rejestracji otrzymasz wersję próbną w wiadomości e-mail w postaci spakowanego folderu o nazwie „ext-6.0.1-trial”.

Wyodrębnij folder, aby znaleźć różne pliki JavaScript i CSS dla swojej aplikacji. Kluczowe pliki JavaScript obejmują:

1. ext.js : Podstawowy plik zawierający wszystkie funkcjonalności aplikacji.
2. ext-all.js : zminimalizowana wersja ext.js bez komentarzy.
3. ext-all-debug.js : niezminifikowana wersja ext-all.js do debugowania.
4. ext-all-dev.js : Kolejna niezminifikowana wersja, przydatna do programowania z komentarzami i dziennikami konsoli.
5. ext-all.js : mniejsza wersja gotowa do produkcji.

Możesz dodać te pliki do folderu JS swojego projektu lub określić bezpośrednią ścieżkę w swoim systemie. W przypadku CSS pliki oparte na motywach są dostępne w różnych folderach, w zależności od tego, czy tworzysz aplikację komputerową, czy mobilną.

W pliku HTML umieść łącze do niezbędnych plików CSS i JavaScript. Alternatywnie możesz skorzystać z sieci dostarczania treści (CDN), aby uniknąć lokalnego pobierania plików. Ext JS jest kompatybilny z różnymi przeglądarkami, w tym IE 6 i nowszymi, Firefox, Chrome, Safari i Opera, dzięki czemu jest wszechstronny do tworzenia stron internetowych.

Jak stworzyć prostą aplikację Ext.js?

Oto proste kroki, jak szybko utworzyć aplikację Ext JS:

Krok 1: Instalowanie pakietów z npm

Ext JS oferuje 30-dniowe pakiety próbne dostępne w publicznym rejestrze npm. Możesz uzyskać najnowszą wersję Ext JS, wykonując to polecenie:

$ npm install -g @sencha/ext-gen

W przypadku istniejących użytkowników Ext JS i powiązane z nim pakiety znajdują się w prywatnym rejestrze npm firmy Sencha. Aby uzyskać do niego dostęp, zaloguj się do rejestru i zainstaluj npm za pomocą następujących poleceń:

$ npm login –registry=https://npm.sencha.com/ –scope=@sencha

$ npm install -g @sencha/ext-gen

Te polecenia konfigurują npm do pobierania i instalowania pakietów z rejestru Sencha w zakresie „@sencha”.

Krok 2: Generowanie aplikacji

W tym kroku utworzymy prostą aplikację z dwoma widokami, zawierającą stronę główną i siatkę, za pomocą następującego polecenia:

aplikacja ext-gen -a -t moderndesktop -n ModernApp

Krok 3: Poznawanie aplikacji

Teraz, gdy nasz projekt został wygenerowany, przejdź do tego katalogu za pomocą:

cd ./modern-app

Aby eksplorować aplikację, zainicjuj ją za pomocą następującego polecenia npm:

początek npm

Poniższe kroki pomogą Ci szybko uwolnić i utworzyć kopię zapasową aplikacji Ext JS w formacie open source.

Sencha: Twój partner w zakresie wyjątkowego interfejsu użytkownika – skontaktuj się z nami!

Do czego służą modele w Ext.js?

Model reprezentuje rodzaj danych w aplikacji. W swojej istocie model składa się z zestawu pól i powiązanych z nimi danych. Model składa się z czterech kluczowych elementów: pól, proxy, powiązań i walidacji.

Pola

Pola modelu są określone we właściwości „fields” jako tablica. Każde pole jest opisane jako obiekt JavaScript zawierający atrybuty takie jak nazwa i typ.

Pełnomocnik

Serwery proxy są wykorzystywane przez sklepy i realizują zadania związane z ładowaniem i przechowywaniem danych modeli. Istnieją dwa typy serwerów proxy:

1. Serwery proxy klienta, które wykorzystują pamięć przeglądarki lub pamięć lokalną do przechowywania danych.
2. Serwery proxy są odpowiedzialne za wysyłanie danych do serwera za pomocą metod takich jak Ajax, JSON-P lub REST.

Wspomnienia

Modele mogą nawiązywać połączenia między sobą, nawet w zastosowaniach na małą skalę z wieloma modelami. Można tworzyć różne typy powiązań, w tym relacje jeden do jednego, jeden do wielu i wiele do jednego.

Walidacje

Walidacje to wyspecjalizowane struktury służące do weryfikacji poprawności danych przechowywanych w określonych polach modelu. ExtJS zapewnia zestaw standardowych walidacji, a typowymi przykładami są kontrole minimalnej lub maksymalnej długości pola.

Jaka jest rola widoków w Ext.js?

Widoki obsługują aspekt wizualny i interfejs użytkownika aplikacji. Widoki składają się z komponentów i układów. Każdy komponent może służyć jako kontener dla innego komponentu, umożliwiając strukturyzację interfejsu aplikacji jako hierarchicznego zbioru widoków.

W ExtJS dostępne są różne układy:

1. FitLayout: ten układ rozszerza element wewnętrzny, aby dopasować go do granic kontenera nadrzędnego.
2. VBoxLayout: Ułatwia pionowe rozmieszczenie elementów.
3. HBoxLayout: Ułatwia poziome układanie elementów.
4. BorderLayout: Ten układ umożliwia dołączanie elementów do jednej z czterech stron okna lub dokowanie ich pośrodku.

Jak skonfigurować powiązanie danych pomiędzy modelem i widokiem?

Klasa Ext.app.ViewModel jest kluczowa dla nawiązywania połączeń danych. Pomyśl o tym jak o organizatorze danych. Jest podobny do Ext.data.Model, ale obsługuje dane w ustrukturyzowany sposób, jak drzewo genealogiczne, a nie tylko listę faktów. Posiada również metodę „bind()” służącą do obserwowania zmian w uporządkowanych danych.

A teraz, jeśli chodzi o drzewo genealogiczne danych: działa to trochę tak, jak wiedza jest przekazywana w rodzinie. Dziecko może uczyć się od rodzica, a rodzic od rodzica i tak dalej. W naszym przypadku nawet komponenty „wnuków” mogą uczyć się od komponentów wyższego poziomu. Wszystko polega na efektywnym dzieleniu się informacjami.

Konfigurowanie powiązania danych pomiędzy modelem i widokiem w Ext JS obejmuje kilka podstawowych kroków:

1. Utwórz model : Najpierw zdefiniuj model reprezentujący strukturę danych, z którą chcesz pracować.Model ten powinien zawierać pola odpowiadające danym, które chcesz wyświetlić w widoku.
2. Utwórz ViewModel : ViewModel działa jako mediator między modelem a widokiem.Zarządza danymi i umożliwia powiązanie ich z komponentami widoku. Możesz utworzyć ViewModel w kontrolerze lub widoku.
3. Powiąż dane z komponentami : użyj metody „bind” ViewModel, aby połączyć pola modelu z komponentami w widoku.Na przykład, jeśli masz pole tekstowe, w którym powinno być wyświetlane imię i nazwisko osoby, możesz powiązać je z odpowiednim polem w swoim modelu.

zobaczModel: {

formuły: {

pełna nazwa: funkcja (get) {

var imię = get('użytkownik.imię');

var nazwisko = get('nazwisko użytkownika');

zwróć imię + ' ' + nazwisko;

}

}

},

rzeczy: [{

xtype: 'pole tekstowe',

FieldLabel: 'Imię',

powiązanie: „{user.firstName}”

}, {

xtype: 'pole tekstowe',

FieldLabel: 'Nazwisko',

powiązanie: „{user.lastName}”

}, {

xtype: 'pole tekstowe',

FieldLabel: 'Imię i nazwisko',

bind: '{fullName}' // To jest pole obliczeniowe

}]

„`

4. Aktualizuj dane : Kiedy aktualizujesz dane w swoim modelu (np. gdy użytkownik wprowadzi nową wartość), mechanizm wiązania danych automatycznie zaktualizuje komponenty połączonego widoku.Podobnie, gdy użytkownik wchodzi w interakcję z komponentami widoku (np. edytuje pole), zmiany zostaną odzwierciedlone z powrotem w modelu.

Wniosek

Ext JS zapewnia inteligentny sposób łączenia danych i tego, co widzisz na stronie internetowej. Konfigurując modele i łącząc je z elementami swojej strony internetowej, możesz mieć pewność, że w przypadku zmiany danych. Co więcej, Twoja strona internetowa jest aktualizowana automatycznie, a gdy użytkownicy wchodzą w interakcję z Twoją stroną, zmiany są zapisywane w Twoich danych.

Ułatwia to tworzenie aplikacji internetowych, poprawia sposób korzystania z witryny przez użytkowników, a programistom ułatwia tworzenie dynamicznych i responsywnych aplikacji internetowych. Ext JS upraszcza cały proces tworzenia kodu HTML, czyniąc tworzenie stron internetowych bardziej wydajnym i przyjaznym dla użytkownika.

Często zadawane pytania

Co to jest Ext.js i dlaczego warto go używać do wiązania danych?

Ext JS to framework JavaScript. Upraszcza wiązanie danych, efektywnie tworząc responsywne aplikacje internetowe i mobilne.

Jakich narzędzi potrzebuję do powiązania danych Ext.js?

Aby rozpocząć wiązanie danych Ext.js, będziesz potrzebować frameworku Ext.js, edytora kodu i przeglądarki internetowej.

Co to jest responsywne projektowanie stron internetowych?

Responsywne projektowanie stron internetowych dostosowuje komponenty internetowe do różnych rozmiarów ekranów, zapewniając optymalną wygodę użytkowania na komputerach stacjonarnych, tabletach i telefonach komórkowych.

Czy JQuery jest frameworkiem JS?

Nie, jQuery nie jest frameworkiem JavaScript; jest to biblioteka upraszczająca manipulację DOM i żądania AJAX.