1.1 browsere Web acceptate
Freymverk Ext JS 4 este susținută de toate browserele moderne, de la Internet Explorer 6 și terminând cu cea mai recentă versiune de Google Chrome. Pentru a dezvolta recomandat pentru a utiliza browsere cu aplicații de depanare web built-in:
- Google Chrome 10+
- Apple Safari 5+
- Mozilla Firefox 4+ cu extensia Firebug
Se presupune că utilizați cea mai recentă versiune de Google Chrome. Dacă nu aveți acest browser, se pare, a fost timp pentru a instala Chrome, și să se stabilească o extensie Chrome Instrumente pentru dezvoltatori.
1.3. Ext JS 4 SDK
Descarca Ext JS 4 SDK. Despachetați arhiva într-un nou director numit ExtJS la baza structurii fișierului serverului dvs. web (gazdă virtuală). Dacă nu știi unde directorul rădăcină al serverului dvs. web, consultați documentația. Raspolozhnie directorul rădăcină server de web depinde de sistemul de operare. locație tipică de directorul rădăcină server web Apache, după cum urmează:
- Ferestre - "C: \ Program Files \ Apache Software Foundation \ Apache2.2 \ htdocs"
- Linux - "/ var / www /"
- Mac OS X - "/ Biblioteca / WebServer / Documente /"
2. Structura Ext JS Application
2.1 Structura de bază
- APPNAME
- aplicaţia
- Spațiu de nume
- Class1.js
- Class2.js
-.
- ExtJS
- resurse
- css
- imagini
-.
- app.js
- index.html
- APPNAME - este directorul în care sunt plasate toate fișierele de aplicații web;
- app - un director care conține toate clasele dumneavoastră, regulile de denumire sunt descrise în acordul privind denumirea documentației sistemului de clasă;
- ExtJS - directorul care conține fișierele de freymverka Ext JS 4 SDK;
- resurse - director care conține fișiere suplimentare, cum ar fi * .css și fișiere imagine, responsabile pentru proiectarea de interfață, precum și o varietate de fișiere de resurse statice (XML, JSON, etc ...).
- index.html - fișierul principal, inițial documentul HTML;
- app.js - fișier cu logica aplicației web.
Creați aceste directoare în orice moment. Acum, să se concentreze pe crearea unui minim de cod care ne va permite să facă prima cerere Ext JS. Vom crea o bază de aplicații Ext JS-stil „Hello World“, pe care le numim „Hello Ext“. În primul rând, trebuie să creați următoarele directoare și fișiere, plasându-le în directorul rădăcină al serverului web (sau gazdă virtuală):
Apoi se extrage Ext JS 4 SDK ExtJS de director. plasându-l în directorul helloext.
De obicei, o aplicație tipică Ext JS pentru a începe crearea de documente HTML index.html. Deschideți fișierul index.html și puneți-l în următorul cod:
Acest HTML-cod, conectați următoarele fișiere:
- ExtJS / resurse / css / ext-all.css - contine toate stilurile necesare pentru freymverka Ext JS;
- ExtJS / ext-debug.js - conține un set minim de biblioteci de clase cu miezul 4 Ext JS;
- app.js - conține codul aplicației web.
Ext.application (nume: 'HelloExt',
lansare: Funcția () Ext.create ( 'Ext.container.Viewport', aspect: 'se potrivesc',
articole: [titlu: 'Bună ziua Ext',
html. „Bună ziua! Bine ati venit la Ext JS. '
>]
>);
>
>);
2.2 dinamică de încărcare cod
Okroyte Chrome Instrumente de dezvoltare depanator și comutați la consola de depanare. Actualizați pagina cu aplicația Hello Ext. Veți vedea următorul mesaj în consolă:
[Ext.Loader] încărcare sincronă 'Ext.container.Viewport'; luați în considerare adăugarea Ext.require ( 'Ext.container.Viewport') de mai sus Ext.onReady
Freymverk Ext JS 4 este un subsistem de încărcare cod dinamic, care se încarcă numai acele biblioteci care sunt cerute de cererea dumneavoastră. În exemplul nostru Ext.create apel creează o instanță a Ext.container.Viewport. Atunci când există un Ext.create apel. se verifică dacă există o definiție cod Ext.container.Viewport. În cazul în care o astfel de determinare nu este, este încărcați codul responsabil pentru punerea în aplicare a Ext.container.Viewport. și încărcarea acest lucru să se întâmple înainte de a crea o instanță a Ext.container.Viewport obiect de clasă.
În exemplul nostru fișier Viewport.js va prelua automat, dar o astfel de încărcare dinamică de cod nu este foarte optim. Când un fișier de încărcare Viewport.js. necesară pentru a crea o instanță Ext.container.Viewport. executarea codului principal se oprește până când preluat fișierul. În așteptare podgruzki fișier va crea o anumită întârziere. Aceste întârzieri pot apărea ca rezultat într-o întârziere foarte mult timp, dacă se efectuează în mod constant crearea de cazuri de diferite clase. Executarea cererii, mai ales la început, va fi intermitent și iritant.
Pentru a scăpa de această problemă, ar trebui să fie la începutul aplicațiilor Ext JS utilizează codul comenzii pretensionate:
Această comandă asigură că acest cod conține o implementare Ext.container.Viewport va prelua înainte de a începe aplicația principală. Și mai presus de avertisment nu va mai apărea în consola de depanare. Puteți verifica acest lucru revigorant browser-ul dvs. după vnecheniya această modificare în codul aplicației.
2.3 biblioteci conecta Metodologie
Când despachetați o arhivă cu Ext JS 4, puteți găsi următoarele fișiere acolo:
- ext-debug.js - acest fișier ar trebui să fie utilizat numai atunci când dezvoltarea unei aplicații. Acesta conține un set minim de clase necesare pentru a rula aplicații Ext JS. Toate clasele suplimentare ar trebui să fie în mod dinamic de încărcare fișiere individuale, după cum sa demonstrat mai sus.
- ext.js - la fel ca și ext-debug.js. redusă la minimum, dar numai pentru utilizarea în prodakshene (m. e. pe serverul de alertă). Destinate a fi utilizate împreună cu fișierul app-all.js (a se vedea secțiunea 3).
- ext-all-debug.js - Acest fișier conține toate biblioteca freymverka Ext JS. Acesta este conceput pentru a scurta oportunitățile de învățare fremverka curba. Cu el puteți începe rapid razrabatyvat aplicație Ext JS, care este axat pe subtilitatile podgruzki bibliotecile necesare.
- ext-all.js - la fel ca și ext-all-debug.js. doar reduse la minimum. Acesta poate fi utilizat în prodakshene numai dacă aveți o aplicație mare, care utilizează toate posibilitățile freymverka. Cu toate acestea, cea mai mare parte, cererea nu va utiliza toate clasele care sunt conținute în acest fișier, astfel încât utilizarea sa în prodakshene de obicei ineficiente. In schimb, se recomandă să se utilizeze un ansamblu special, care sunt scrise în secțiunea 3.
Codul 3. Publicarea pe serverul de alertă (implementare)
După ce instalați Tools Sencha SDK, deschideți terminalul și modificați directorul de aplicație, de exemplu:
Fiind în acest director, urmați câteva comenzi simple. Inițial, Generare JSB3-fișier:
Sencha crea JSB -a index.html -p app.jsb3
Pentru aplicațiile care utilizează limbaj de scripting server-side pentru crearea de conținut dinamic, cum ar fi PHP, Ruby, ASP etc. trebuie să înlocuiți index.html la URL-ul curent la controler frontal principal în aplicația:
Sencha crea comandă va scana fișierul index.html, și întreaga structură de directoare pentru prezența fișierelor antet, care sunt de fapt folosite în cerere, și apoi a crea JSB-fișier numit app.jsb3. Generarea de JSB3-fișier înainte de asamblarea finală a aplicației permite dezvoltatorului de a face modificări înainte de aplicarea vor fi colectate definitiv. Cu toate acestea, nu vom schimba nimic în ea, și doar se colectează aplicația folosind a doua echipă:
Sencha construi -p app.jsb3 -d.
Acest lucru va crea două fișiere, pe baza datelor din fișierul app.jsb3:
- all-classes.js - Acest fișier conține toate clasele utilizate în cerere. Aceasta nu este o imagine redusă la minimum, astfel încât este util pentru depanarea aplicațiilor pe serverul de alertă. În exemplul nostru, acest fișier este gol, deoarece aplicația „Hello Ext“ nu conține clase.
- app-all.js - acest fișier conține o aplicație minimizat pentru a asambla toate clasele, plus toate clasele Ext JS cerute de aplicație. Aceasta este versiunea cu un cod de minimizat, adecvat pentru utilizare în prodakshene, și conține de fapt fișierul minimizat toate-classes.js plus app.js fișier.
Strict vorbind, în Ext JS avem nevoie de a avea două versiuni diferite ale index.html - versiunea Productions și versiunea pentru depanare. Vei întâlni acest lucru atunci când se confruntă cu procesul de asamblare real, sub o altă logică de pe partea de server. Dar acum haideți să creați un nou fișier numit index prod.html în directorul helloext. pentru a se asigura că colectate prin fișierele de sistem construi să funcționeze corect:
Rețineți că fișierul ext-debug.js este acum eliminat și înlocuit cu ext.js. și app.js fișier se înlocuiește cu app-all.js.