Sencha ExtJs – Navigare il DOM con DomQuery e i Selettori

fonte: dal web

La navigazione del DOM (Document Object Model) e l’utilizzo dei selectors (selettori) sono due caratteristiche fondamentali sulle quali possiamo confrontare i diversi framework javascript a disposizione per lo sviuppo delle moderne interfacce web complesse.

Sencha ExtJs mette a disposizione gli strumenti per lavorare e manipolare le pagine web: in questo tutorial vedremo come selezionare elementi specifici della pagina, come manipolarli e come recuperare le informazioni contenute negli elementi stessi.

L’oggetto Ext.Element è uno strumento potente e semplice, e soprattutto cross-browser, per accedere agli elementi del DOM e svolgere operazioni su di essi. Vediamo subito un esempio:

Ext.onReady(function() {
    var mio_div = Ext.get('mio-div');
});

Supponendo di aver creato nella nostra pagina HTML un div con attributo “id” impostato a “mio-div”, possiamo recuperare questo elemento utilizzando il metodo “get” come mostra l’esempio alla riga 2, salvando un riferimento nella variabile javascript “mio_div”.

A questo punto possiamo manipolare l’elemento e svolgere azioni su e con esso. Ad esempio possiamo applicare effetti grafici con pochissime righe di codice, come mostra il codice seguente:

Ext.onReady(function() {
    var mio_div = Ext.get('mio-div');
    mio_div.highlight();
});

Per vedere come applicare altri effetti grafici agli elementi DOM potete leggere un tutorial scritto qualche tempo fa e disponibile alla seguente pagina.

Se volessimo selezionare un elemento del DOM attraverso altre informazioni rispetto all’attributo “id” allora possiamo utilizzare un oggetto specifico, DomQuery, un potente selettore DOM che ci permette di selezionare elementi attraverso un attributo generico o una classe CSS. Supponiamo di avere questo codice HTML nella nostra pagina web:

< p >paragrafo 1 < / p >
< p class=”secondo”>paragrafo 2< / p >
< p >paragrafo 3 < / p >

Possiamo utilizzare il selettore per recuperare ad esempio tutti gli elementi della pagina HTML di tipo “<p>” :

Ext.onReady(function() {
   var items = Ext.select('p');
   console.log(items);
});

Nella variabile “items” avremo un oggetto di tipo “CompositeElement” che fornisce l’accesso agli elementi selezionati. Questo ci permette di agire direttamente su tutti gli elementi selezionati evitando di implementare cicli o di doverne selezionare uno per volta.
Ad esempio potremo applicare a tutti i paragrafi della nostra pagina HTML un effetto grafico con una sola istruzione, come nell’esempio seguente:

Ext.onReady(function() {
   Ext.select('p').frame('ff0000',3);
 });

Con una sola riga di codice applichiamo a tutti i paragrafi della pagina l’effetto “frame” (verrà creata una cornice di colore “ff0000″ per 3 secondi intorno ad ogni paragrafo).

Se invece volessimo applicare un effetto grafico ad uno solo elemento specifico, ad esempio al solo paragrafo con classe “secondo”, potremmo procedere nel seguente modo:

Ext.onReady(function() {
   Ext.select('p.secondo').highlight();
});

dove “p.secondo” è la stringa che passiamo all’oggetto DomQuery per la ricerca, in cui “p” è il tipo di elemento che stiamo cercando e “secondo” il nome della classe dell’elemento da selezionare.
Il passo successivo è legare eventi ad un elemento specifico, come nell’esempio seguente:

Ext.onReady(function() {
  Ext.get('mio-div').on('click', function() {alert('Hai cliccato sul div');});
});

Nell’esempio precedente recuperiamo l’elemento che ci interessa controllare (l’elemento div con attributo id uguale a “mio-div”) e su questo richiamiamo il metodo “on”, passandogli come parametro l’evento che vogliamo controllare (‘click’ del mouse) e una funzione anonima da eseguire allo scatenarsi dell’evento dichiarato. Nel nostro caso, quando cliccheremo sul div verrà lanciato un messaggio di alert con il messaggio “Hai cliccato sul div”: tutto questo implementato con una solo riga di codice.

Maggiori  dettagli sul funzionamento di DomQuery / DomHelper le trovate qui. Se volete approfondire lo studio dei selettori in Sencha ExtJs potete consultare la documentazione ufficiale al seguente indirizzo .