Wprowadzenie do Ext JS

ExtJS

Poziom średnio-zaawansowany

Do tej pory pojawiały się kursy framework’ów JavaScript w 2 lub 3 częściach. Ten jest nieco inny. Jest to jednoczęściowy mini kurs dotyczący biblioteki Ext JS. Ma na celu wprowadzenie do tego potężnego framework’u języka JavaScript.

Ext JS

Jest to framework dla języka JavaScript, wspierający budowanie interaktywnych aplikacji WWW, interfejsów użytkownika, używając technik takich jak DOM czy AJAX.

Posiada m.in. wiele wbudowanych kontrolek GUI, takich jak date-picker, edytor html, kontrolki drzewa (tree), siatek (grid), paski narzędzi i menu w stylu aplikacji desktop, suwaki czy też wykresy bazujące na grafice wektorowej. A ponadto inne zaawansowane funkcjonalności.

Bogactwo możliwości zostało zaprezentowane krótko w przykładach demo.

Należy jednak zapoznać się z licencją, ponieważ biblioteka zależnie od zastosowań, jest dostępna na licencji Open Source lub komercyjnej.

Start z Ext JS

Pobieramy Ext JS z oficjalnej strony WWW.

Jest także możliwość skorzystania z CDN:

<script type="text/javascript" charset="utf-8" 
  src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all.js"></script>

ale przypominam o zapoznaniu się z licencją.

Testujemy czy wszystko jest jak należy:

Ext.onReady(function() {

  alert("Gratulacje! Załadowano poprawnie Ext JS!");

  // tutaj dodajemy nasz kod bazujący na Ext JS

});

W jQuery mamy do dyspozycji zdarzenie .ready:

$(document).ready(function() {
// …
});

I da się tu zauważyć pewne podobieństwo. W Ext JS jest zdarzenie Ext.onReady, które określa że biblioteka została poprawnie załadowana.

Dostęp do elementów

Pobieranie elementu, czyli w „czystym” JavaScript odbywa się to poprzez:

var myDiv = document.getElementById('myDiv');

a w wielu framework’ach dostępne są funkcje „$”, jak w Prototype JS czy jQuery: $(‚myDiv’);

Natomiast w Ext JS to po prostu Ext.get():

Ext.onReady(function() {
    var myDiv = Ext.get('myDiv');
});

Wykonywanie operacji na elementach

Ext JS udostępnia wiele metod znanych zapewne z innych framework’ów, na przykład służących do dynamicznego dodawania klasy CSS dla elementu, jak też bardziej specyficzne dla samego Ext JS, jak Element.center().

Spójrzmy na przykłady:

// błysk - tło elementu zostanie podświetlone
myDiv.highlight();

// dodanie klasy CSS
myDiv.addClass('red');

// wyśrodkowanie położenia elementu
myDiv.center();

// nadanie określonej przezroczystości dla elementu
myDiv.setOpacity(.25);

Więcej na temat Ext.element znajdziemy w odpowiednim miejscu dokumentacji.

Idźmy dalej: DOM.

Wybieranie węzłów DOM

Czasami z różnych względów musimy szukać i pobierać elementy po parametrach innych niż ich ID. Wtedy trzeba przeszukiwać dokument pod kątem użytych klas CSS, czy też po nazwach tagów HTML.

Omawialiśmy to już w przypadku Prototype JS i jQuery. Ext JS nie pozostaje gorszy na tle innych bibliotek – działa to na podobnej zasadzie. Zastosowana zostaje metoda Ext.select().

Przykład – zostanie podświetlony każdy paragraf:

Ext.select('p').highlight();

DomQuery w Ext JS wspiera szeroki wachlarz opcji pobierania elementów, w tym większość selektorów DOM (W3C CSS3), podstawowy XPath, atrybuty HTML i inne.

Przykład:

Ext.query("span"); // elementy span dokumentu

Ext.query("span", "foo"); // span z ID foo

Polecamy dość szczegółowy artykuł na temat podstaw DomQuery.

Zdarzenia / Events

Do kontroli i obsługi zdarzeń, Ext JS udostępnia mocne metody z przyjazną składnią.

Prosty przykład obsługi zdarzeń w Ext JS:

HTML

<input type="button" id="myBtn" value="Click" />

JavaScript

Ext.onReady(function() {
    Ext.get('myBtn').on('click', function() {
        alert("You clicked the button");
    });
});

Button jest tylko przykładem, możemy oczywiście powiązać zdarzenia z dowolnym innym elementem dokumentu, np.:

Ext.onReady(function() {
    Ext.select('p').on('click', function() {
        // wykonaj jakieś operacje ...
    });
});

Przekazywanie argumentów do obsługi zdarzeń

Prosty przykład jak to zrobić, tworząc delegator poprzez createDelegate:


var myHandler = function(evt, t, o, myArg1, myArg2, myArg3) {
    alert('Test');
}

Ext.select('.element-type1').addListener(
  'click', myHandler.createDelegate(this, [1, 'Abc', 123], true));

Ext.select('.element-type2').addListener(
  'click', myHandler.createDelegate(this, [2, 'Def', 555], true));

Omówmy argumenty, z którymi wywołany zostaje event handler (funkcja obsługująca zdarzenie).

Argumenty evt, t, o to standardowe argumenty przekazywane do obsługi zdarzenia w Ext JS, przede wszystkim element będący celem zdarzenia oraz argumenty (kolekcja argumentów przekazana do funkcji).

Argumenty myArg1, myArg2, myArg3 natomiast są to nasze własne, opcjonalne parametry. Czasami programista może ich potrzebować, więc jest prosta możliwość przekazywania.

Podsumowanie

To wszystko w naszym mini kursie framework’a Ext JS. Jest to prawdziwy kombajn jeśli chodzi o możliwości – wystarczy spojrzeć na przykłady aplikacji stworzonych na bazie Ext JS.

Dla dociekliwych link do dość ciekawych tutoriali, oraz oczywiście do oficjalnej dokumentacji (dla różnych wersji Ext JS).

Web Developer ze sporym bagażem doświadczeń.
Języki: xhtml, html5, css3, js, php, python, java.
Hobby: programowanie gier (browser, mobile).

Podaj dalej: Share on Facebook0Tweet about this on TwitterShare on Google+1Share on LinkedIn0Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.