Cum să implementați legarea datelor în Ext.js: o prezentare practică

Bun venit la ghidul nostru practic despre cum să funcționeze legarea de date în Ext.js JavaScript Framework! Legarea datelor este ca un lipici magic care leagă aspectul site-ului dvs. de lucruri care se modifică pe acesta. Ext.js JavaScript Framework este un instrument minunat care vă ajută să faceți acest lucru cu ușurință. În acest blog, vă vom prezenta întregul proces în pași simpli. Indiferent dacă ești un programator profesionist sau abia la început, vom acoperi elementele de bază.

Veți învăța cum să conectați datele la părțile dvs. Ext.js JavaScript Framework, astfel încât site-ul dvs. să poată reacționa și să se actualizeze fără probleme. Până la sfârșit, veți avea abilitățile necesare pentru a vă face aplicațiile web mai interactive și mai dinamice. Să începem cu legarea de date Ext.js!

Ce este legarea de date?

Legarea datelor este ca o legătură utilă între aspectul unui site web și lucrurile care se pot schimba pe acesta. Imaginați-vă ca pe o conexiune magică care menține site-ul web și datele să lucreze împreună fără probleme. Deci, atunci când ceva se schimbă în date, cum ar fi un preț sau un nume, site-ul web afișează automat acea modificare fără ca tu să fii nevoit să faci nimic.

În Ext.js, care este un set de instrumente pentru dezvoltatorii web, există o caracteristică grozavă numită legarea de date bidirecțională. Înseamnă că atunci când faci ceva pe site, cum ar fi să dai clic pe un buton sau să tastezi o casetă, se actualizează datele. Și când datele se modifică, actualizează instantaneu site-ul web. Acest lucru face site-ul dvs. mai interactiv și mai receptiv.

Care este semnificația legării datelor în dezvoltarea web?

Legarea datelor este foarte importantă în dezvoltarea web, deoarece se asigură că aspectul site-ului dvs. se potrivește cu datele în schimbare, fără să faceți totul manual. Face aplicațiile web și mobile mult mai dinamice și mai receptive, economisind dezvoltatorilor timp și efort în scrierea unui cod complex.

Legare bidirecțională de date în Ext.js.

Toate tipurile de legături din Ext JS și Sencha Touch urmează un proces familiar: folosesc setari și programe de actualizare. Legarea unidirecțională înseamnă că atunci când ceva se schimbă în ViewModel, actualizează o configurație folosind setter-ul său. Legarea în două sensuri este similară, dar folosește un update, care este ca un handler special. Dacă un updater modifică cu succes o configurație, schimbă și valoarea legată în ViewModel, care actualizează alte legături.

Pentru a face ca o configurație să accepte legarea bidirecțională, puteți utiliza opțiunea „twoWayBindable”. De obicei, este folosit în culise, dar poate fi util atunci când creați vederi sau componente personalizate. De exemplu, Ext.field.Text își configurează „valoarea” să fie legabilă în două sensuri astfel:

twoWayBindable: {

valoare: 1

}

Într-un exemplu cu un câmp spinner, atunci când valoarea acestuia se schimbă, acesta declanșează actualizatorul, pe care ViewModel-ul îl interceptează. Aceasta actualizează apoi conținutul unui container de mai jos, totul pentru că configurația „html” este legată. Acest lucru funcționează fără probleme, deoarece Ext.field.Spinner este legat de Ext.field.Text, care este configurat să funcționeze cu legare bidirecțională pentru „valoarea” sa.

Cum se instalează și se configurează Ext.js într-un mediu de dezvoltare?

Pentru a obține versiunea de încercare a fișierelor bibliotecii Ext JS, vizitați site-ul web al Sencha la https://www.sencha.com. La înregistrare, veți primi versiunea de încercare în e-mailul dvs. sub forma unui folder arhivat numit „ext-6.0.1-trial”.

Extrageți folderul pentru a găsi diferite fișiere JavaScript și CSS pentru aplicația dvs. Fișierele cheie JavaScript includ:

1. ext.js : fișierul de bază care conține toate funcționalitățile aplicației.
2. ext-all.js : o versiune redusă a ext.js fără comentarii.
3. ext-all-debug.js : o versiune neminificată a ext-all.js pentru depanare.
4. ext-all-dev.js : O altă versiune neminificată, utilă pentru dezvoltare cu comentarii și jurnalele console.
5. ext-all.js : o versiune mai mică, pregătită pentru producție.

Puteți adăuga aceste fișiere în folderul JS al proiectului sau puteți specifica o cale directă pe sistemul dumneavoastră. Pentru CSS, fișierele bazate pe teme sunt disponibile în dosare diferite, în funcție de dacă construiți o aplicație desktop sau mobilă.

În fișierul HTML, trimiteți la fișierele CSS și JavaScript necesare. Alternativ, puteți utiliza o rețea de livrare de conținut (CDN) pentru a evita descărcarea fișierelor la nivel local. Ext JS este compatibil cu diverse browsere, inclusiv IE 6 și versiuni ulterioare, Firefox, Chrome, Safari și Opera, ceea ce îl face versatil pentru dezvoltarea web.

Cum se creează o aplicație simplă Ext.js?

Iată pașii simpli pentru a crea rapid o aplicație Ext JS:

Pasul 1: Instalarea pachetelor din npm

Ext JS oferă pachete de probă de 30 de zile disponibile în registrul public npm. Puteți achiziționa cea mai recentă versiune Ext JS executând această comandă:

$ npm install -g @sencha/ext-gen

Pentru utilizatorii existenți, Ext JS și pachetele sale asociate se află în registrul privat npm al Sencha. Pentru a-l accesa, conectați-vă la registry și instalați npm folosind următoarele comenzi:

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

$ npm install -g @sencha/ext-gen

Aceste comenzi configurează npm pentru a prelua și instala pachete din registrul Sencha în domeniul „@sencha”.

Pasul 2: Generarea aplicației

În acest pas, vom crea o aplicație simplă cu două vizualizări care include o pagină de pornire și o grilă folosind următoarea comandă:

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

Pasul 3: Explorarea aplicației

Acum că proiectul nostru este generat, navigați la acel director folosind:

cd ./modern-app

Pentru a explora aplicația, inițiază-o cu următoarea comandă npm:

npm start

Acești pași vă vor ajuta să setați rapid backup gratuit și open source pentru aplicația dvs. Ext JS.

Sencha: Partenerul tău pentru o interfață de utilizare excepțională – Luați legătura!

Pentru ce sunt folosite modelele în Ext.js?

Un model reprezintă un fel de date în cadrul unei aplicații. În esență, un model constă dintr-un set de câmpuri și datele asociate acestora. Un model cuprinde patru elemente cheie: Câmpuri, Proxy, Asocieri și Validări.

Câmpuri

Câmpurile model sunt specificate în proprietatea „câmpuri” ca o matrice. Fiecare câmp este descris ca un obiect JavaScript care conține atribute precum numele și tipul.

Proxy

Proxy-urile sunt angajați de magazine și gestionează sarcini legate de încărcarea și stocarea datelor modelului. Există două tipuri de proxy:

1. Proxy-uri client, care utilizează memoria browserului sau stocarea locală pentru stocarea datelor.
2. Serverele proxy sunt responsabile pentru trimiterea datelor către server prin metode precum Ajax, JSON-P sau REST.

Asociațiile

Modelele pot stabili conexiuni între ele, chiar și în aplicații la scară mică cu mai multe modele. Pot fi create diverse tipuri de asociații, inclusiv relații unu-la-unu, unu-la-mulți și mai multe-la-unu.

Validari

Validările sunt structuri specializate utilizate pentru a verifica corectitudinea datelor stocate în anumite câmpuri de model. ExtJS oferă un set de validări standard, exemple comune fiind verificări pentru lungimi minime sau maxime de câmp.

Care este rolul vizualizărilor în Ext.js?

Vizualizările gestionează aspectul vizual și interfața cu utilizatorul unei aplicații. Vizualizările sunt compuse din Componente și Aspecte. Fiecare componentă poate servi ca un container pentru o altă componentă, permițând structurarea interfeței aplicației ca o colecție ierarhică de vederi.

În ExtJS, sunt disponibile diverse aspecte:

1. FitLayout: Acest aspect extinde elementul interior pentru a se potrivi cu limitele containerului părinte.
2. VBoxLayout: facilitează aranjarea verticală a articolelor.
3. HBoxLayout: facilitează aranjarea orizontală a articolelor.
4. BorderLayout: Acest aspect permite atașarea articolelor pe una dintre cele patru laturi ale ferestrei sau fixarea lor în centru.

Cum se configurează legătura de date între model și vizualizare?

Clasa Ext.app.ViewModel este crucială pentru realizarea conexiunilor de date. Gândește-te la asta ca la un organizator de date. Este similar cu Ext.data.Model, dar gestionează datele într-un mod structurat, ca un arbore genealogic, nu doar o listă de fapte. De asemenea, are o metodă „bind()” pentru a urmări modificările în aceste date organizate.

Acum, despre acest arbore genealogic de date: funcționează un pic ca modul în care cunoștințele sunt transmise într-o familie. Un copil poate învăța de la părintele său, iar părintele de la părintele său și așa mai departe. În cazul nostru, chiar și componentele „nepoților” pot învăța de la componentele de nivel superior. Totul este despre partajarea eficientă a informațiilor.

Configurarea legăturii de date între model și vizualizare în Ext JS implică câțiva pași esențiali:

1. Creați un model : Mai întâi, definiți un model care reprezintă structura de date cu care doriți să lucrați.Acest model ar trebui să includă câmpuri care corespund datelor pe care trebuie să le afișați în vizualizarea dvs.
2. Creați un ViewModel : ViewModelul acționează ca un mediator între modelul dvs. și vizualizare.Gestionează datele și oferă o modalitate de a le lega la componentele dvs. de vizualizare. Puteți crea un ViewModel în controler sau vizualizare.
3. Legați date la componente : utilizați metoda „bind” a ViewModel pentru a conecta câmpurile modelului dvs. la componentele din vizualizarea dvs.De exemplu, dacă aveți un câmp de text care ar trebui să afișeze numele unei persoane, îl puteți lega de câmpul corespunzător din modelul dvs.

viewModel: {

formule: {

fullName: function(get) {

var firstName = get('user.firstName');

var lastName = get('user.lastName');

returnează prenume + ' ' + prenume;

}

}

},

articole: [{

xtype: „câmp text”,

fieldLabel: „Prenumele”,

bind: „{user.firstName}”

}, {

xtype: „câmp text”,

fieldLabel: „Nume”,

bind: „{user.lastName}”

}, {

xtype: „câmp text”,

fieldLabel: „Nume complet”,

bind: '{fullName}' // Acesta este un câmp calculat

}]

„`

4. Actualizare date : Când actualizați datele din modelul dvs. (de exemplu, atunci când un utilizator introduce o nouă valoare), mecanismul de legare a datelor va actualiza automat componentele de vizualizare conectate.În mod similar, atunci când un utilizator interacționează cu componentele vizualizării (de exemplu, editarea unui câmp), modificările vor fi reflectate înapoi în model.

Concluzie

Ext JS oferă o modalitate inteligentă de a lega datele și ceea ce vedeți pe o pagină web. Configurați modele și conectându-le la elementele paginii dvs. web, vă puteți asigura că atunci când datele se schimbă. Mai mult, pagina dvs. web se actualizează automat, iar atunci când utilizatorii interacționează cu pagina dvs. web, modificările sunt salvate în datele dvs.

Acest lucru facilitează crearea de aplicații web, îmbunătățește modul în care utilizatorii experimentează site-ul dvs. și facilitează crearea de aplicații web dinamice și receptive pentru dezvoltatori. Ext JS simplifică întregul proces de cod html, făcând dezvoltarea web mai eficientă și mai ușor de utilizat.

Întrebări frecvente

Ce este Ext.js și de ce să-l folosești pentru legarea datelor?

Ext JS este un cadru JavaScript. Simplifică legarea datelor, creând eficient aplicații web și mobile receptive.

De ce instrumente am nevoie pentru legarea datelor Ext.js?

Pentru a începe legarea datelor Ext.js, veți avea nevoie de framework Ext.js, un editor de cod și un browser web.

Ce este Responsive Web Design?

Designul web responsive adaptează componentele web la diferite dimensiuni de ecran, asigurând o experiență optimă pentru utilizator pe desktop-uri, tablete și mobile.

Este JQuery un cadru JS?

Nu, jQuery nu este un cadru JavaScript; este o bibliotecă pentru simplificarea manipulării DOM și a solicitărilor AJAX.