ExtJs – Gestione di iFrame all’interno di una Window ridimensionabile

fonte: dal web

ExtJs sta conoscendo un successo davvero notevole, sia in ambito web sia in ambito mobile. Dopo l’articolo sull’integrazione tra ExtJs e PHP, vediamo un altro interessante esempio delle potenzialità di questo flessibile framework javascript.

Quello che vedremo in questo articolo è più un trucco che altro, ma in alcune situazioni è decisamente utile e ci fa risparmiare un sacco di tempo e di problemi. Ecco lo scenario: supponiamo di voler aprire una nuova finestra del browser a seguito di un’azione esguita dall’utente sul client (es. click su un bottone, click su un link, ecc.) . Potremmo usare il classico metodo javascript:

window.open ("http://www.blogrammazione.com","newwindow");

ma non sempre questo rappresenta una scelta vincente, perchè non tutti i browser rispondono bene in determinate situazione (es. la creazione “on-the-fly” di pdf su una nuova finestra Internet Explorer 8 non funziona correttamente).

Come risolvere?

L’idea alla base è semplice: se abbiamo la necessità di aprire un frame o un iframe all’interno di una nuova finestra possiamo utilizzare un oggetto Window di ExtJs, opportunamente configurato. Vediamo il codice:

Ext.IframeWindow = Ext.extend(Ext.Window, {
   onRender: function() {
   this.bodyCfg = {
   tag: 'iframe',
   src: this.src,
   cls: this.bodyCls,
   style: {
    border: '0px none'
   }
  };

    Ext.IframeWindow.superclass.onRender.apply(this, arguments);
  }
});

var w = new Ext.IframeWindow({
  id: 'id',
  width: 500,
  height: 400,
  title: 'iFrame caricato in una nuova Window',
  src:'http://www.blogrammazione.com';
})

w.show();

Per chi ha familiarità con ExtJs il discorso dovrebbe risultare limipido e chiaro: estendiamo il componente nativo Window con un altro componente che chiamiamo IframeWindow.
Questo compontente dispone di alcuni parametri di configurazione, come ad esempio:

width
height
src
title

dove chiaramente “src” (linea 20) corrisponde al URL della pagina che verrà inserita nell’iframe. Estendendo Window, IframeWindow godrà di tutte le proprietà di Window, come ad esempio “maximizable”, “modal”, “monitorResize” e molte altre ancora, utile per rendere comoda e aumentare la navigabilità delle informazioni sui nostri applicativi web.