compendiu

Acest tutorial a fost pregătit pentru începători pentru a le ajuta să înțeleagă conceptul de Ext JS pentru a crea interfața web dinamic.

Ce este Ext JS

Ext JS se bazează pe arhitectura MVC / MVVM. Cea mai recentă versiune de Ext JS 6 este o platformă unificată, care poate fi utilizată atât pentru desktop și mobile, aplicații care nu au un cod diferit pentru diferite platforme.

Ext JS 2.0

Ext JS 4.0

Ext JS 6.0

Ext JS 6 combină Ext JS (pentru aplicație desktop) și atingeți Sencha (pentru mobil) structura.

caracteristici

Acest spectacol are Ext JS

  1. Personalizate de colectare widget-uri UI interfață cu utilizatorul bogat cum ar fi un suport plasă diagrame formă grilă copac.
  2. Compatibilitatea Cod cu versiuni noi de vechi.
  3. layout manager flexibil permite organizarea și conținutul de date grafice în diferite browsere, dispozitive și dimensiunea ecranului.
  4. pachete de date Advance separă widget UI din stratul de date. Pachetul de date vă permite să colecteze date pe partea de client folosind modele funcționale care permit funcții, cum ar fi sortarea și filtrarea.
  5. Acest protocol agnostic, și poate avea acces la date din orice sursă de fundal.
  6. profile personalizate widget-uri Ext JS sunt disponibile într-un număr de teme out-the-box sunt consistente pe toate platformele.

Sencha Ext JS este standardul de lider pentru dezvoltarea de aplicatii web în clasa business. Ext JS oferă instrumentele necesare pentru a construi aplicații robuste pentru computere desktop și tablete.

restricţii

  1. dimensiunea bibliotecii este mare de aproximativ 500 KB, ceea ce face ca timpul de încărcare inițială mai face aplicația lent.
  2. HTML complet
tag-uri face complicat și dificil de depanare.
  • În conformitate cu politica de stat generală în domeniul licenței este gratuit pentru aplicații open source, dar a plătit pentru aplicații comerciale.
  • De mai multe ori pentru a descărca, chiar și lucruri simple, durează câteva linii de cod, care este mai ușor decât HTML sau Jquery.
  • Nevoia este un dezvoltator experimentat pentru dezvoltarea de aplicatii Ext JS.

    • instrumente

    Acestea sunt instrumentele furnizate de Sencha utilizate pentru dezvoltarea de aplicații Ext JS, în principal, pentru nivelul de producție.

    Sencha CMD este un instrument care furnizează caracteristicile Ext JS cod minification, schele, generarea de asamblare de producție.

    Plugin-uri Sencha IDE

    Sencha IDE plug-in-uri, care sunt combinate cadru sencha Into IntelliJ, WebStorm Ida. Acest lucru ajută la creșterea productivității dezvoltator prin furnizarea de caracteristici, cum ar fi finalizarea cod, codul de verificare, codul de navigație, de generare de cod, codul de refactoring, creați un șablon și verificarea ortografiei, etc.

    inspector Sencha

    Sencha Inspector este un instrument de depanare care ajută debugger pentru a depana orice probleme în timpul dezvoltării.

    Încercați versiunea electronică

    Am creat un mediu de programare ExtJS on-line, astfel încât să puteți compila și rula toate exemplele disponibile pe Internet. Acest lucru face sigur că ați citit și vă permite să testați programul cu diferite variante. Aveți posibilitatea să modificați orice instanță și executa-l pe Internet.

    Încercați următorul exemplu utilizarea Încercați să-l opțiune este disponibilă în colțul din dreapta sus al casetei de mai jos codul de probă:

    Pentru cele mai multe dintre exemplele din acest ghid veți găsi o opțiune pentru a încerca secțiuni de site codul nostru în colțul din dreapta sus, care vă va duce la compilator on-line. Deci, doar l utilizați și să se bucure de învățare.

    Configurarea mediului local

    Această secțiune conține instrucțiuni privind modul de a descărca și instala pe Ext JS pe calculatorul dumneavoastră. Vă rugăm să urmați instrucțiunile pentru configurarea mediului.

    Descărcați fișierele bibliotecă

    Imagine și descriere

    ext.js
    Acesta este fișierul principal care conține toate funcționalitatea pentru a rula aplicația.

    ext-all-debug.js
    Aceasta versiune a unminified EXT-all.js pentru depanare scop.

    ext-all.js
    Acest fișier este utilizat în scopuri de producție, în general, este mult mai mică decât oricare alta.

    Puteți adăuga aceste fișiere în dosarul JS proiect sau vă poate oferi o cale directă la fișierul este în sistemul dumneavoastră.

    (2) CSS Fișierele Există mai multe fișiere bazate pe tema. pe care le puteți găsi în \ ext-6.0.1-familiarizare \ de asamblare ext-6.0.1 \ \ \ \ tema clasică a resurselor clasice \-temă clasică all.css

    Dacă vom folosi o aplicație desktop, putem folosi o temă clasică în \ ext-6.0.1-probă \ Ext-6.0.1 \ de asamblare \ clasic

    Dacă vom folosi aplicația mobilă, vom folosi teme moderne, care pot fi găsite în \ ext-6.0.1-probă \ ext-6.0.1 \ construi \ moderne

    Aceste fișiere vor fi adăugate la biblioteca aplicației Ext JS este după cum urmează:

    Economisiti ExtJS codul cerere în app.js fișier.

    configurare CDN

    Ext JS suporta compatibilitate cross browser-ul, acesta suporta toate browserele majore, cum ar fi:

    • IE 6+
    • Firefox 3.6 și mai mare
    • Chrome10 de mai sus
    • Safari 4 și mai sus
    • Opera 11 și de mai sus

    Puteți utiliza orice browser pentru a rula aplicația Ext JS.

    Convenția de denumire este un set de reguli care trebuie urmate pentru identificatori.

    Acest lucru face codul mai ușor de citit și de înțeles de către alți programatori, de asemenea.

    El ar trebui să citească cazul cămilă pentru a se referi la sintaxa de clasă, metoda variabilelor și proprietăților.

    Dacă numele este o combinație de două cuvinte, al doilea cuvânt va începe cu o literă de capital întotdeauna. de exemplu. doLayout (). StudentForm, FirstName, etc.

    Ext JS urmează arhitectura MVC / MVVM.

    MVC - Arhitectura Modelul View Controller (versiunea 4)

    MVVM - Model View ViewModel (versiunea 5)

    Această arhitectură nu este necesară pentru program, dar aceasta este cea mai bună practică să urmeze această structură, în scopul de a face codul maintainable și foarte organizat.

    Structura proiectului cu aplicatii Ext JS

    Aplicația va include un controler, tip, model, magazin de unelte, fișiere app.js.

    app.js: fișierul principal. în cazul în care fluxul programului va începe să fie incluse în HTML de bază - fișier. utilizând