Ext JS 4

előző ◈ a következő

1.1 Támogatott webböngészők

Freymverk Ext JS 4 támogatja az összes modern böngésző, az Internet Explorer 6 és befejezve a legújabb verzióját a Google Chrome. Hogy dolgozzon ajánlott böngészők beépített hibakereső webes alkalmazások:

  • Google Chrome 10+
  • Apple Safari 5+
  • Mozilla Firefox 4+ a Firebug kiterjesztés

Azt feltételezzük, hogy Ön a legújabb verzióját a Google Chrome. Ha nincs meg ez a böngésző, úgy tűnik, eljött az ideje, hogy a Chrome telepítése, kérjük, és azt tűzte ki kiterjesztés Chrome fejlesztői eszközök.

1.3. Ext JS 4 SDK

Töltse Ext JS 4 SDK. Az archívum kibontása egy új könyvtárat ExtJS a gyökere a webszerver fájl szerkezetét (virtuális gép). Ha nem tudja, hol a gyökér könyvtárába a webszervert dokumentációjában. Raspolozhnie webszerver gyökérkönyvtárába függ az operációs rendszert. Tipikus helyét a Apache webszerver gyökérkönyvtárába az alábbiak szerint:

  • A Windows - "C: \ Program Files \ Apache Software Foundation \ Apache2.2 \ htdocs"
  • Linux - "/ var / www /"
  • Mac OS X - "/ Library / webserver / Documents /"

2. Ext JS alkalmazás szerkezetének

2.1 alapvető szerkezete

- appname
- app
- névtér
- Class1.js
- Class2.js
-.
- ExtJS
- erőforrás
- css
- képek
-.
- app.js
- index.html

  • appname - a könyvtárba kerülnek az összes webes alkalmazás fájlokat;
  • app - egy könyvtárat, amely tartalmazza az összes osztályok, az elnevezési szabályok leírását a megállapodás az elnevezés a dokumentáció az osztály rendszer
  • ExtJS - tartalmazó könyvtár fájljait freymverka Ext JS 4 SDK;
  • források - tartalmazó könyvtár további fájlokat, mint például a * .css és képfájlok felelős felület, valamint a különböző statikus erőforrás fájlok (XML, JSON, stb ...).
  • index.html - a fő fájl az eredeti HTML dokumentum;
  • app.js - fájlt a logikája a webes alkalmazás.

Létre ezeket a könyvtárakat bármikor. Most összpontosítani létrehozása minimum kód, amely lehetővé teszi számunkra, hogy az első Ext JS alkalmazás. Létrehozunk egy adatbázis Ext JS-stílusú alkalmazások „hello world”, amit úgy hívunk „Hello Ext”. Először létre kell hoznia a következő könyvtárakat és fájlokat, forgalomba őket a gyökér könyvtárába a webszervert (vagy virtuális host):

Aztán kivonat Ext JS 4 SDK könyvtár ExtJS. helyezi el helloext könyvtárban.

Általában egy tipikus Ext JS alkalmazás létrehozásának megkezdéséhez HTML index.html dokumentumot. Nyisd ki az index.html fájlt, és helyezze el az alábbi kódot:

Ez a HTML-kódot, csatlakoztassa az alábbi fájlokat:

  • ExtJS / resources / css / ext-all.css - tartalmazza az összes stílus szükséges freymverka Ext JS;
  • ExtJS / ext-debug.js - tartalmaz egy minimális osztály könyvtárak a mag 4 Ext JS;
  • app.js - tartalmazza a kódot a webes alkalmazás.

Ext.application (neve: 'HelloExt'
dob: function () Ext.create (Ext.container.Viewport ", elrendezése: 'fit',
tételek: [cím: 'Hello Ext'
html. „Hello! Üdvözöljük a Ext JS.
>]
>);
>
>);

2.2 A dinamikus kódot loading

Okroyte Chrome Developer Tools hibakereső és kapcsolót a hibakereső konzol. Az oldal frissítése Hello Ext alkalmazás. Látni fogja a következő üzenet jelenik meg a konzolon:

[Ext.Loader] szinkron betöltése 'Ext.container.Viewport'; vegye fel Ext.require ( 'Ext.container.Viewport') a fenti Ext.onReady

Freymverk Ext JS 4 alrendszere dinamikus kód betöltése, ami betölti csak azok a könyvtárak, amelyek szükségesek az alkalmazás. A példánkban Ext.create hívás létrehoz egy példányt Ext.container.Viewport. Ha van egy hívás Ext.create. ellenőrizzük, hogy van-e kód Ext.container.Viewport meghatározás. Ha egy ilyen meghatározás nem, akkor töltsd fel a kódot végrehajtásáért felelős Ext.container.Viewport. és feltölteni, hogy ez megtörténjen, mielőtt létre egy példánya a tárgy Ext.container.Viewport.

A példánkban Viewport.js fájl automatikusan letölti, de az ilyen dinamikus terhelése kód nem túl optimális. Amikor egy Viewport.js fájlt feltölteni. létrehozásához szükséges egy példány Ext.container.Viewport. a végrehajtás a fő kód leáll, amíg meg letölteni a fájlt. Várakozás fájl podgruzki okozni fog némi késéssel. Az ilyen késedelmek következtében keletkeztek egy nagyon hosszú késés, ha végre következetesen példányok létrehozása a különböző osztályok. Végrehajtása az alkalmazás, főleg az elején, majd intermittáló és irritáló.

Ahhoz, hogy megszabaduljon ezt a problémát, meg kell elején Ext JS alkalmazások a következő parancs kód előfeszítő:

Ez a parancs biztosítja, hogy a kód tartalmaz egy végrehajtási Ext.container.Viewport elhozza megkezdése előtt a fő alkalmazást. És a fenti figyelmeztetés nem jelenik meg a hibakereső konzol. Ennek ellenőrzéséhez a frissítő után a böngésző vnecheniya ez a változás az alkalmazás kódját.

2.3 könyvtárak csatlakozni módszertana


Amikor kicsomagol egy archívumot az Ext JS 4, akkor meg a következő fájlokat oda:

  • ext-debug.js - ezt a fájlt csak akkor kell használni, amikor alkalmazást fejleszteni. Ez tartalmaz egy minimális osztályok működéséhez szükséges Ext JS alkalmazás. Minden további osztályok dinamikusan betölthető egyes fájlokat, amint azt a fenti.
  • ext.js - ugyanaz, mint az ext-debug.js. minimalizálni kell, de csak használatra prodakshene (m. e. a riasztási szerveren). Célja, hogy együtt használható az alkalmazás-all.js fájlt (lásd 3. pont).
  • ext-all-debug.js - ez a fájl tartalmazza a könyvtár freymverka Ext JS. Úgy tervezték, hogy lerövidíti a tanulási görbe fremverka lehetőségeket. Segítségével gyorsan indul razrabatyvat Ext JS alkalmazás, amely középpontjában a finomságok podgruzki szükséges könyvtárak.
  • ext-all.js - ugyanaz, mint az ext-all-debug.js. csak minimalizált. Ezt fel lehet használni a prodakshene csak akkor, ha van egy nagy alkalmazás, amely az összes lehetőséget freymverka. Azonban a legtöbb alkalmazás nem fog használni az összes osztályt, amely tartalmazza ezt a fájlt, így annak használata prodakshene általában hatástalan. Ehelyett azt javasoljuk, hogy egy speciális összeállítás, ami meg van írva a 3. részben.

3. Közzététel kódot figyelmeztető szerver (telepítési)

Miután telepítette a Sencha SDK Tools, nyissa meg a terminál és a változás a könyvtárba az alkalmazás, például:

Mivel ebben a könyvtárban, az alábbi néhány egyszerű parancsokat. Kezdetben generálása JSB3-file:

Sencha létre JSB -a index.html -p app.jsb3

Használó alkalmazások szerver oldali programozási nyelv a dinamikus tartalom, mint a PHP, Ruby, ASP, stb akkor ki kell cserélni a index.html az aktuális URL a fő front controller az alkalmazásban:

Sencha létre parancs átvizsgálja az index.html fájlt, és az egész könyvtár szerkezetnek jelenlétére header fájlok ténylegesen felhasznált alkalmazás, majd hozzon létre JSB-nevű fájlt app.jsb3. Generálása JSB3-fájl előtt végleges összeszerelése az alkalmazás lehetővé teszi, hogy a fejlesztő, hogy módosítsa a kérelem benyújtása előtt kerül véglegesen beszedni. Mi azonban nem változtat semmit benne, és csak összegyűjti az alkalmazást a második csapat:

Sencha építmények -p app.jsb3 -d.

Ez létrehoz két fájlt, adatai alapján app.jsb3 file:

  • minden classes.js - ez a fájl tartalmazza az összes osztályt használják az alkalmazást. Ez nem egy minimalizált képet, ezért hasznosak a hibakeresés alkalmazások éber szerveren. A példánkban ez a fájl üres, mert az alkalmazás „Hello Ext” nem tartalmaz osztályokat.
  • app-all.js - ez a fájl tartalmazza a minimalizált alkalmazások összeszerelni minden osztály, valamint az összes Ext JS osztályok az alkalmazáshoz szükséges. Ez a változat egy minimális kódot, alkalmasak prodakshene, és valóban tartalmazza a minimális fájl minden classes.js plusz app.js fájlt.

Szigorúan véve, a Ext JS van szükségünk, hogy két különböző változatai index.html - Productions változat és a verzió hibakeresés. Találkozhatsz ezt, amikor szembesül a valós összeszerelési folyamat alatt egy másik logika a szerver oldalon. De most nézzük csak hozzon létre egy új fájlt úgynevezett index-prod.html a helloext könyvtárban. annak biztosítására, hogy a gyűjtött építmények rendszerfájlok működnek megfelelően:



szia Ext

Megjegyezzük, hogy az ext-debug.js fájl törlődik, és helyére ext.js. és app.js fájl helyébe app-all.js.

előző ◈ a következő