Ext Js- Uruchomienie

lis12008

Rozpoczynam, kurs programowania przy pomocy biblioteki ExtJs. Jest to biblioteka napisana w Java script, ale do programowania nie wymaga biegłej znajomości tego języka programowania.To co potrzebujecie na samym początku aby rozpocząć zabawę z tą rewolucyjną biblioteką EXTJS, to sama biblioteka , oraz serwer WWW.

Serwer możecie zainstalować lokalnie na komputerze, lub wykupić konto hostingowe. Polecam na początek zabawę na serwerze lokalnym, np Xampp, którego możecie pobrać z adresu: Xampp instalatora następnie sciągnąc najnowszą wersję biblioteki ExtJs, którą znajdziecie pod adresem Bibliotek ExtJs.

Paczkę należy ściągnąć i zgrać na dysk w lokalizację z której korzysta serwer WWW (przeważnie jest to htdocs).

Krok 1: Tworzymy plik, za pomocą dowolnego edytora tekstowego. Może to być Notatnik z windowsa, ale polecam trochę bardziej zaawansowane narzędzie, jakim jest notepad++, który jest bardzo pomocny przy szukaniu i edycji błedów.

Krok 2: Ściągnięcie i instalacja Firefoxa, oraz dodatku do niego o nazwie FireBug

Krok 3 Tworzymy pierwszy plik test.html, korzystający z biblioteki Extjs i sprawdzamy czy wszystko działa.

Aby można było uruchomić funkcje bibliotek ExtJs należy ją najpier załadować do pliku, czynimy to za pomocą poniższego kod. Każdy plik powinien zaczynać się od ponizszego kodu. (istnieje możliwość załadowania tylko raz tego kodu, ale o tym w innym tutorialu)

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">

<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="ext/ext-all.js"></script>

Oczywiście parametr src zależy od prawdziwej ścieżki dostępu, wg powyższego kodu katalog z biblioteką extjs nazywa się ext i znajduje się w tym samym katalogu co plik test.html. Dobrą też praktyką jest ładowanie wszystkich dodatkowych funkcji pisanych w JavaScript z osobnych plików i ładowanie ich tylko wtedy kiedy są one potrzebne. Dodajemy wiec do naszego pliku następującą linijkę.

<div class="code" style="margin: 3px;"><script type="text/javascript" src="test.js"></script></div>

Dzięki temu oddzielimy kod HTML’a od javascript. Mamy wiec na obecną chwilę następujące pliki i katalogi. Ext – zawierający wszystkie pliki biblioteki, plik test.html, oraz plik test.js.

Sprawdzimy teraz czy wszystko działa.

Do wcześniej stworzonego pliku test.js dodajemy następujące wiersze:

<div class="code" style="margin: 3px;">Ext.onReady(function() {

document.write("Gratuluję, twója pierwsza  stronka z wykorzystaniem extjs  ");

});</div>

To co warte jest wytłumaczenia, to że praktycznie kazda aplikacja napisana w ExtJs zaczyna się od Ext.onReady(function(){}, po czym dopiero pojawiają się instrukcje deklarujące poszczególne elementy.

Po uruchomieniu pliku test.html zobaczymy na ektranie coś takiego. „Gratuluję, twója pierwsza stronka z wykorzystaniem extjs ”

e-szablony.eu – Tutoriale, Kursy