Share
Hei, băieți, Levi Hackwith aici. Astăzi, vom discuta versiunea patru a cadrului JavaScript, ExtJS. Vom acoperi ceea ce este, cum să îl instalăm și apoi vom arăta puterea lui ExtJS, creând o rețea de date robustă folosind câteva exemple de date pe care le-am pus împreună.
Acest tutorial include un screencast disponibil pentru membrii Tuts + Premium.
Deci, haideți să începem prin a trece peste ceea ce este de fapt ExtJS. ExtJS, dezvoltat de o companie numită Sencha, este un cadru JavaScript special conceput pentru a construi aplicații web. Principala diferență dintre un cadru JavaScript ca ExtJS și o bibliotecă JavaScript ca jQuery este ExtJS este menit să fie folosit pentru a construi întregi aplicații - toate instrumentele de care aveți nevoie sunt găsite în cadrul - în timp ce jQuery este proiectat pentru a fi introdus într-un site existent adăugați funcționalitate.
"Principala diferență dintre un cadru JavaScript ca ExtJS și o bibliotecă JavaScript ca jQuery este ExtJS este menit să fie folosit pentru a construi aplicații întregi - toate instrumentele de care aveți nevoie sunt găsite în cadrul - în timp ce jQuery este proiectat pentru a fi pus într-un site existent pentru a adăuga funcționalitate? "
Pentru a instala ExtJS, va trebui mai întâi să o descărcați de pe site-ul Sencha. Mergeți la http://www.sencha.com/products/extjs și faceți clic pe butonul "Descărcați" din colțul din dreapta sus. Pe această pagină, veți vedea o secțiune intitulată "Lucrul în Open Source?" urmat de un link pentru a descărca ExtJS 4.0.2a - ultima versiune. Continuați și faceți clic pe acel link și descărcarea va începe în curând. Acum, veți observa că descărcarea este destul de mare, de peste 30 de megaocteți. Acest lucru se datorează faptului că fișierul zip pe care l-ați descărcat conține nu numai fișierele de cadru ExtJS, ci și toate exemplele și documentația pe care le veți găsi și pe site-ul web Sencha. În plus, acesta conține, de asemenea, mai multe versiuni ale cadrului: unul care este complet documentat și necomprimat pentru utilizarea în dezvoltare și unul care a fost minificat și comprimat pentru utilizarea pe sistemele de producție. Odată ce fișierul zip este descărcat, extrageți conținutul acestuia și luați folderul pe care îl creează și îl încărcați pe site-ul dvs., așa cum am aici. Observați că am redenumit dosarul doar la "extjs" - toate minuscule. Acest lucru va face mai ușor să se refere mai târziu.
Acum, că am trecut peste niște informații de fundal și am obținut Cadrul încărcat pe site-ul nostru, să începem codificarea. Acum, după cum puteți vedea din fișierele de proiect de aici în stânga, am creat deja o structură de bază pentru aplicația noastră și am creat o pagină index.html și un fișier JavaScript script.js gol. Pagina HTML este locul unde vom include toate scripturile necesare pe care le-am încărcat mai devreme, iar fișierul JavaScript este locul în care vom pune tot codul nostru de aplicație.
Să începem prin deschiderea fișierului index.html. După cum puteți vedea, am configurat deja o pagină HTML de bază utilizând modulul doctype HTML5. Acum vă voi spune despre fișierele necesare de care veți avea nevoie pentru a crea o aplicație ExtJS, precum și despre cum să le includeți.
Primul lucru pe care vom dori să îl includem este fișierul CSS. Fără acest fișier, aplicația noastră nu va arăta corect atunci când se execută.
În continuare trebuie să includeți fișierele JavaScript necesare. Primul fișier pe care îl vom include este ext-all-debug; aceasta este întreaga bibliotecă ExtJS, necomprimată. În al doilea rând, dorim să includeți fișierul script.js. Amintiți-vă că acesta este fișierul în care va intra codul aplicației noastre.
Acum că am inclus toate fișierele necesare, să începem să codificăm. Primul lucru pe care vrem să-l facem este să ne asigurăm că tot codul pe care îl scriem se declanșează după ce pagina web a terminat încărcarea, așa că vom înfășura tot codul nostru într-un apel la funcția Ext.onReady. Adăugați următoarele în fișierul script.js:
Ext.onReady (funcția () );
Acum, sunt două lucruri pe care vreau să le subliniez despre acest cod: mai întâi, trecem printr-o întreagă funcție într-un apel de metodă (onReady). Aceasta este ceea ce se numește callback: o funcție care este apelată imediat ce o altă sarcină este completă - în cazul nostru, pagina a fost încărcată. În al doilea rând, veți observa că am precedat această metodă de apel cu "Ext" Acesta este numit un spațiu de nume. Un spațiu de nume este o modalitate de a conține variabile și metode în recipiente separate pentru a preveni lucruri precum coliziunea variabilă. ExtJS se bazează foarte mult pe spațiile de nume pentru a funcționa corect. De fapt, fiecare metodă de apel în ExtJS este cuprinsă în - la minimum - un spațiu de nume: Ext. Veți fi expuși unor exemple mai complexe de utilizare a spațiului de nume, pe măsură ce progresăm prin acest tutorial.
Bine, acum că am stabilit metoda noastră onReady, să declare dataGrid nostru. Actualizați fișierul script.js cu următoarele:
Accentsconagua
Ext.onReady (funcția () Ext.create ('Ext.grid.Panel', );); Aici declarăm o nouă instanță sau o copie a unei rețele de date ExtJS prin trecerea spațiului de nume complet "Ext.grid.Panel" la metoda "create". Acum, veți observa și brațele goale în care am trecut. În JavaScript, o pereche de brațe goale înseamnă un obiect gol. În ExtJS, atunci când creați o rețea de date (sau orice alt obiect) folosind metoda "create", trebuie să treceți în setări sau - în termeni ExtJS - configurația obiectului prin trecerea într-un obiect JavaScript cu proprietăți reprezentând proprietățile rețelei pe care o creăm. Acum, dacă sună puțin confuz, va avea mai multă sens atunci când merg înainte și configurez grila de date. Să mergem mai departe și să facem asta acum:
Ext.onReady (funcția () Ext.create ('Ext.grid.Panel', store: Ext.create ('Ext.data.Store', ))) După cum puteți vedea, am adăugat o proprietate numită "magazin" în grila noastră de date și i-am atribuit o instanță a unui obiect nou - un magazin. În ExtJS, scopul unei rețele de date este de a afișa date și că datele trebuie să vină de undeva: un magazin.
Un magazin este, în cea mai mare parte, doar o colecție de înregistrări. Un exemplu mai real din acest punct ar putea fi aplicația de contact din telefonul smartphone. Partea din aplicație care vă permite să vedeți contactele dvs. este grilă, iar partea din aplicația care cuprinde respectiva listă de contacte este magazinul.
Ext.onReady (funcția () Ext.create ('Ext.grid.Panel', store: Ext.create ('Ext.data.Store', fields: id: ', nume:' first_name ', tip:' string ', name:' last_name ', tip:' string ', name:' dob ', tip:' date ', dateFormat:' Ymd ' ]));); După cum puteți vedea, am adăugat o proprietate numită "câmpuri" în obiectul magazinului nostru. Câmpurile sunt ca și rubricile coloanelor dintr-o foaie de calcul. Dacă fiecare rând din foaia de calcul este o singură înregistrare, fiecare coloană - sau câmp - din foaia de calcul reprezintă o proprietate a acelei înregistrări. Pentru exemplul nostru de astăzi, vom face o rețea de date plină de contacte, astfel încât fiecare înregistrare din magazin va avea: un ID care oferă pur și simplu un identificator unic pentru fiecare înregistrare, un prim nume, un nume de familie și o dată de naștere. Acum, după cum puteți vedea, pentru fiecare câmp le-am specificat proprietatea "nume" și o proprietate "tip". Aceste proprietăți sunt destul de directe: spunem magazinului nostru ce fel de câmp este și ce ar trebui să fie numit. Acum, când ajungeți la câmpurile dob - sau la data nașterii - veți observa că am stabilit un tip de "dată" pentru a semnifica un câmp de date - nimic cu adevărat în afara locului - dar, de asemenea, am adăugat o proprietate 'dateFormat'. Această proprietate indică magazinului faptul că câmpul "dob" va stoca valoarea de dată în formatul an, lună, zi. Acest lucru poate părea ciudat acum, dar va deveni destul de important odată ce începem să înființăm restul rețelei.
Acum, când ne-am înființat magazinul și am adăugat câteva câmpuri, să mergem mai departe și să o populam cu date:
Ext.onReady (funcția () Ext.create ('Ext.grid.Panel', store: Ext.create ('Ext.data.Store', fields: id: ', nume:' first_name ', tip:' string ', name:' last_name ', tip:' string ', name:' dob ', tip:' date ', dateFormat:' Ymd ' ], date: ['id': 1, 'first_name': 'John', 'last_name': 'Smith', 'dob': '1950-03-04' id: 2, first_name: 'Jane', 'last_name': 'Doe', 'dob': '1960-07-24']));); Practic, ceea ce am făcut aici este umplerea magazinului nostru cu date de probă utilizând câmpurile pe care le-am definit anterior ca șablon. Dacă priviți aproape, veți observa că numele proprietăților din date se potrivesc cu numele câmpurilor din proprietatea "câmpuri" a magazinului. Aceasta se numește "cartografiere". Mapăm datele din proprietatea datelor, în câmpurile asociate din proprietatea "câmpuri" a magazinului. De asemenea, rețineți modul în care ne-am asigurat că tipurile de date ale datelor se potrivesc cu tipurile de date din magazin. Dacă îi amestecați, lucrurile nu se pot încărca corect.
Bine, asta e tot ce trebuie să facem pentru a configura magazinul rețelei astfel încât să ne întoarcem la configurarea rețelei în sine. Următorul lucru pe care dorim să-l creăm în grila noastră este coloanele. Acesta este exact ceea ce pare: vom stabili ce coloane vor fi afișate când încărcătura noastră va fi încărcată.
Ext.create ('Ext.data.Store', fields: name: 'Ext. id ',' nume ',' nume ',' nume ',' nume ',' nume ' , dateFormat: 'Ymd'], date: ['id': 1, 'first_name': 'John', 'last_name': 'Smith', ' : 2, 'first_name': 'Jane', 'last_name': 'Doe', 'dob': '1960-07-24' , antet: "First name", dataIndex: 'first_name', antet: 'Lastname', dataIndex: 'last_name' m / d / Y ', xtype:' coloana dată ']));); La fel ca și înainte, am declarat proprietatea - "coloane" - și am trecut într-o serie de obiecte, fiecare obiect reprezentând o singură coloană în grilă. Observați cum fiecare coloană conține cel puțin două proprietăți: "header" și "dataIndex". Antetul specifică ce se afișează ca antetul coloanei în rețea (ceea ce va vedea utilizatorul); dataIndex hartă acea coloană într-un anumit câmp din magazin. Si asta e! Asta e tot ce trebuie să faceți pentru a construi o rețea de date.
Înainte de a putea spune că suntem complet făcuți, trebuie să facem grila pe ecran. Pentru a face acest lucru, să stocăm grila noastră într-o variabilă pe care o putem reutiliza ulterior:
? var grid = Ext.create ("Ext.grid.Panel", ? Tot ceea ce spunem aici este "Grilă, redați corpul documentului HTML" - Destul de direct. Continuați și actualizați fișierul index.html și vedeți cum am făcut-o. După cum puteți vedea, în mai puțin de 30 de minute am creat o rețea solidă de date care are toate aceste caracteristici: putem afișa și ascunde coloane, putem sorta datele și putem rearanja coloanele. Asta e puterea lui ExtJS!
În Revista, am discutat despre ce este ExtJS, diferența dintre o bibliotecă și un cadru, cum să descărcați și să instalați ExtJS și am discutat cum să definim și să configuram un obiect ExtJS - în acest caz o rețea de date.
Dacă doriți să aflați mai multe despre ExtJS și citiți documentația, vă sugerez să mergeți la sencha.com site-ul web și consultați documentele API pentru ExtJS 4. Aici veți găsi toate informațiile de care aveți nevoie pentru a începe să dezvoltați propriile aplicații. Dacă rămâneți blocat, puteți verifica forumurile sencha.com și le puteți cere ajutor sau orice alt site de programare care are o placă de mesaje.
