JavaScript  »  Articoli  »  Ext.js 

Nel file che chiameremo 'window.js' troviamo il seguente semplice codice:

Ext.onReady(function(){
    var win;
    var button = Ext.get('show-btn');
 var bd = Ext.getBody();
	Ext.util.CSS.swapStyleSheet('theme', '../ext/resources/css/xtheme-postit.css');
	var cnt=0;
	var xPos=100;
	var yPos=100;

button.on('click', function(){
        // create the window on the first click and reuse on subsequent clicks
	cnt++;
	xPos+=50;
	yPos+=50;
	if (xPos>=300)
	{
		xPos=120;
		yPos=100;
	}

       createPostIt(cnt,xPos,yPos);
    });

var createPostIt=function(cnt,xPos,yPos){
var win =  new Ext.Window({
	title:'Postit #'+cnt,
	id:'win'+cnt,
       layout:'fit',
       width:500,
       height:300,
	x:xPos,
	y:yPos,
       closeAction:'hide',
       frame:true,
       items: new Ext.Panel({
          title: 'The best test in all site',
          layout:'fit',
	   frame:true,
	  Html: '<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. '+
	   'Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, '+
	   'when an unknown printer took a galley of type and scrambled it to make a type '+
              …
	   '(injected humour and the like).</p>',
    }),
                buttons: [{
                    text: 'Close',
                    handler: function(){
                        win.hide();
                    }
                }]
            });
	    win.show(this);
	}
});

Cominciamo indicando al browser di partire a interpretare il nostro codice Javascript solo dopo che la pagina è stata caricata (Ext.onReady). Dopo di che creiamo qualche variabile di shortcut per gli elementi che utilizzeremo più spesso nel nostro codice. Si noti come abbiamo messo nella variabile button l'oggetto input che abbiamo descritto nella nostra pagina HTML tramite l'id che avevamo notato prima.

Associamo un'azione all'evento di click del pulsante rappresentato dalla variabile button. Qui troviamo il codice con cui creiamo la nostra finestra, in modo che ad ogni click venga disegnata con gli attributi rappresentati tra parentesi graffe, all'interno della dicitura new Ext.Window({…});.

Ci siamo permessi di aggiungere una finezza, memorizzando le posizioni di x e y della finestra precedente quando esiste, altrimenti le abbiamo inizializzate a 100, fuori dalla funzione handler dell'evento. In questa maniera riusciamo a produrre un gradevole effetto cascade per ogni finestra aperta in successione. 

Infine aggiungiamo un pulsante alla finestra che permetterà di nascondere la finestra quando viene premuto.

Il risultato del nostro lavoro è visibile qui. Disponibile anche il pacchetto zip con gli esempi.

Conclusioni e anticipazioni

Con questo esempio terminiamo l'articolo doppio su Panel e Window. Siamo riusciti a vedere come impostare i due principali oggetti che compongono una web application e abbiamo continuato il nostro cammino nelle tecniche di disegno di GUI crossbrowser utilizzando Ext.js. Negli articoli che seguiranno vedremo cosa mettere dentro alle nostre finestre, partiremo analizzando Form e Griglie e proseguiremo con TabPanel, Accordion e altre utilities che coinvolgeremo nei nostri disegni.

Altri articoli

Altre guide

Altre newsletter