Sencha ExtJs – Centrare nello schermo tutti gli oggetti Window

fonte: dal web

Rieccoci a parlare di Sencha ExtJs, uno tra i più interessanti e potenti framework Javascript oggi in circolazione. Quello che vediamo in questo breve tutorial è un comodo override da applicare ad tutti i widget “Window” per centrare nello schermo la renderizzazione delle finestre.

Questo approccio è molto comodo quando stiamo implementando ad esempio l’interfaccia di un applicativo che richiedere l’utilizzo di molte finestre, come ad esempio un gestionale o un CMS. La potenza di Sencha ExtJs rispetto ai molti framework Javascript considerati suoi “avversari” (Dojo in primis) è data proprio dal fatto che questo prodotto mette a disposizione degli sviluppatori tutta una seria di widget semplici, completi e decisamente funzionali, tutti praticamente pronti all’uso.

I widget “Window” sono chiaramente tra i più utilizzati, perchè permettono in realtivamente poco tempo-lavoro di avere complesse interfacce complete e funzionali. In questi casi è molto comodo centralizzare il comportamente delle finestre, visto che nella maggior parte dei casi queste verranno visualizzate centrate rispetto allo schermo e quindi all’area di lavoro disponibile.

Per impletare questo tipo di lavoro possiamo utilizzare questo override:

Ext.override(Ext.Window, {

beforeShow : function(){

delete this.el.lastXY;

delete this.el.lastLT;

if(this.x === undefined || this.y === undefined){

var xy = this.el.getAlignToXY(this.container, 'c-c'),

pos = this.el.translatePoints(xy[0], xy[1]);

if(this.position === 'cascade'){

this.x = Ext.winPosx = (Ext.winPosx)? Ext.winPosx+20 : pos.left;

this.y = Ext.winPosy = (Ext.winPosy)? Ext.winPosy+20 : pos.top;

}else{

this.x = this.x === undefined? pos.left : this.x;

this.y = this.y === undefined? pos.top : this.y;

}

}

this.el.setLeftTop(this.x, this.y);

//gestione dell'espansione

if(this.expandOnShow){

this.expand(false);

}

//gestione finestra modale

if(this.modal){

Ext.getBody().addClass('x-body-masked');

this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));

this.mask.show();

}

}

});

Il codice di cui sopra è più semplice di quel che potrebbe sembrare: viene applicato un override all’oggetto “Ext.Window” (riga 1), per cui ogni volta che utilizzeremo questo widget, prima di essere visualizzato (stiamo utilizzando il listener “beforeShow” – riga 2) verranno sovrascritti i valori delle sue posizioni (X e Y – righe 9,10 o 12, 13 in base ai casi).

Viene anche gestito il caso in cui la finestra sia dichiarata “modale” (le finestre modali sono quelle che una volta aperte e attivate permettono di lavorare esclusicamente nel loro contesto, disabilitando l’accesso al background – righe 25-27) e la funzionalità di espansione nativa in tutti i widget di tipo “Window” (riga 20).