Indice del forum Olimpo Informatico
I Forum di Zeus News
Leggi la newsletter gratuita - Attiva il Menu compatto
 
 FAQFAQ   CercaCerca   Lista utentiLista utenti   GruppiGruppi   RegistratiRegistrati 
 ProfiloProfilo   Messaggi privatiMessaggi privati   Log inLog in 

    Newsletter RSS Facebook Twitter Contatti Ricerca
Extjs e la potenza di Ajax: Lez 1, gli eventi
Nuovo argomento   Rispondi    Indice del forum -> Linguaggi per Internet
Precedente :: Successivo  
Autore Messaggio
freemind
Supervisor sezione Programmazione
Supervisor sezione Programmazione


Registrato: 04/04/07 20:28
Messaggi: 4643
Residenza: Internet

MessaggioInviato: 11 Mag 2009 23:01    Oggetto: Extjs e la potenza di Ajax: Lez 1, gli eventi Rispondi

Ogni tanto mi riprendo dal mio torpore mentale e posto qualche howto.
Eccomi qui a parlarvi della gestione base degli eventi secondo il paradigma di extjs.
Gli eventi sono un argomento molto importante nella programmazione e il web-programming non fa eccezione.
Un primo esempio
Iniziamo con lo scrivere la seguente paginetta e poi la commenterò:
Codice:

   <?xml version="1.0" encoding="UTF-8" ?>
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Test!</title>
         
      <!-- core di extjs e js specifici -->
          <script type="text/javascript" src="/lib/ext-2.2/adapter/ext/ext-base.js"></script>
          <script type="text/javascript" src="/lib/ext-2.2/ext-all-debug.js"></script>
          
          <script type="text/javascript">
             Ext.onReady
             (
                function()
                {
                   Ext.get('bottone').on('click',
                      function()
                      {
                         alert('Hai cliccato il bottone!');
                      }
                   );
                },
                window
             );
          </script>
      
      <!-- css di extjs e css specifici -->
          <link rel="stylesheet" type="text/css" href="/lib/ext-2.2/resources/css/ext-all.css" />   
      </head>
      <body>
         <form name="frm" method="get" action="">
            <input type="button" id="bottone" value="Bottone"/>
         </form>
      </body>
   </html>

Come potete vedere la pagina contiene un semplice bottoncino (la form è stata creata solo per avere la pagina validabile) con id="bottone".
Spendiamo due parole sul codice all'interno del metodo Ext.onReady.
Tramite il costrutto:
Codice:

   Ext.get(idNodo)

recuperiamo il nodo con id 'idNodo' (document.getElementById('idNodo')).
Il metodo 'on' serve ad agganciare un event handler ad un certo evento che nel nostro caso è il 'click' e la funzione che verrà fatta partire è quella anonima definita inline come ultimo parametro.
Se volessimo leggere la riga in italiano potremmo interpretarla così:
Codice:

   Quando clicchi sul bottone con id "bottone" fai apparire l'alert.

Avremmo ottenuto la stessa cosa tramite:
Codice:

<script type="text/javascript">
   function bottone_onClick()
   {
      alert('Hai cliccato il bottone!');
   }
      
   Ext.onReady
   (
      function()
      {
         Ext.get('bottone').on('click',bottone_onClick);
      },
      window
   );
</script>

ma la prima versione è più comoda.
Un po' di più...
Ricordate la prima lezione quando spiegavo come extjs permettesse di fare delle query xpath per selezionar e un insieme di nodi? Ecco, ora vedremo come agganciare in un colpo solo il nostro alert al click di un qualunque input presente nella pagina.
Codice:

   Ext.onReady
      (
         function()
         {
            Ext.select('input').on('click',
             function()
             {
                alert('Hai cliccato un bottone!');
             }
            );
         },
         window
      );

Il metodo Ext.select seleziona tramite il selettore passato gli elementi della pagina. Nel nostro caso abbiamo detto al framework di tirar fuori tutti gli input e al click sugli stessi di far partire l'alert.
Possiamo fare meglio: se nella pagina ci fosse un altro tipo di input al quale però non siamo interessati dovremmo fare in modo di ignorarlo. Per far questo utilizzeremo in modo più complesso una query xpath.
Codice:

   Ext.onReady
      (
         function()
         {
            Ext.select('input[type=button]').on('click',
             function()
             {
                alert('Hai cliccato un bottone!');
             }
            );
         },
         window
      );

La query xpath passata a Ext.select seleziona tutti i nodi input che hanno l'attributo type uguale a "button" escludendo gli altri. Se provate ad esempio ad aggiungere alla pagina una casella di testo, cliccandoci sopra non succederà nulla!
La cosa però non si ferma qui.
Se volessimo far sì che il messaggio nell'alert ci dica esattamente quale bottone abbiamo premuto?
La cosa è ancora molto semplice, sfrutteremo un po' di più il metodo 'on'.
L'handler che viene agganciato all'evento in realtà può ricevere alcuni parametri. Il primo indica l'EventObject che viene passato alla stessa e contiene varie informazioni, prima fra tutte l'evento che è stato lanciato. Vi invito a dare uno sgurdo alle api per capire bene che cosa contiene l'oggetto EventObject. Non è il normale oggetto Event di javascript ma è normalizzato rispetto ai browser quindi indipendentemente da firefox, safari, opera etc... lo usere allo stesso modo (a differenza che con javascript "classico").

Sempre di più...
Modifichiamo ancora il codice come segue:
Codice:

   Ext.onReady
    (
         function()
         {
            Ext.select('input[type=button]').on('click',
            function(e)
            {
                alert('Hai cliccato il bottone: ' + e.target.id + '!');
              }
          );
       },
       window
    );

Come detto prima possiamo passare all'handler l'EventObject creato e tramite la proprietà target possiamo risalire al nodo DOM effettivamente coinvolto. La proprietà id di questo indica proprio l'attributo id dell'elemento percui se provate, l'alert visualizzerà l'id del bottone cliccato.
Notate quanto poco codice serve per agganciare un handler a più oggetti.

Questo conclude la lezione.
freemind
Top
Profilo Invia messaggio privato
Mostra prima i messaggi di:   
Nuovo argomento   Rispondi    Indice del forum -> Linguaggi per Internet Tutti i fusi orari sono GMT + 1 ora
Pagina 1 di 1

 
Vai a:  
Non puoi inserire nuovi argomenti
Non puoi rispondere a nessun argomento
Non puoi modificare i tuoi messaggi
Non puoi cancellare i tuoi messaggi
Non puoi votare nei sondaggi