Sencha ExtJs – Centrare nello schermo tutti gli oggetti Window

novembre 22nd, 2011 - (1 Comments)


sencha extjs

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.

(continua…)

, ,

Sencha ExtJS – Recuperare un parametro dall’URL

settembre 8th, 2011 - (1 Comments)


sencha extjs

fonte: dal web

Sencha ExtJs sta guadagnando sempre più terreno nel panorama dei framework Javascript per lo sviluppo di applicazione web ma anche mobile, grazie alla sua flessibilità, efficiente, potenza e facilità d’uso.

In questo tutorial vedremo una piccola funzione per leggere uno specifico parametro passato nell’URL.

(continua…)

, , , ,

Sencha ExtJs – Navigare il DOM con DomQuery e i Selettori

maggio 30th, 2011 - (0 Comments)


sencha extjs

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.

(continua…)

, ,

Sencha ExtJS – ‘createContextualFragment’ non supportato in IE 9

maggio 19th, 2011 - (8 Comments)


 

sencha extjs

fonte: dal web

Con l’aggiornamento a Internet Explorer 9 (IE 9) non sarà possibile utilizzare le web application che abbiamo equipaggiato con ExtJs versione 3.*: IE9 infatti non supporta il metodo createContextualFragment generando errori che nella pratica non permettono la navigazione del sito. Il metodo javascript createContextualFragment è utile quando vogliamo creare un oggetto DocumentFragment con del contenuto iniziale: createContextualFragment era stato inizialmente pensato come alternativa all’ormai più diffuso e conosciuto metodo innerHTML.

Se per diversi motivi non possiamo aggiornare il framework Sencha ExtJs alla versione 4 (in cui la fix dovrebbe essere già impostata), possiamo utilizzare una piccola fix per risolvere il problema.
(continua…)

, ,

Sencha ExtJs – Renderizzare codice HTML in container ExtJs

marzo 25th, 2011 - (2 Comments)


 

sencha extjs

fonte: dal web

In questo tutorial vedremo come inserire codice HTML in un Container Sencha ExtJS. La soluzione di questo problema ci aiuta in tutti quei in cui abbiamo la necessita di visualizzare informazioni all’utente senza tuttavia perdere gli strumenti che ci mette a disposizione un framework potente come Sencha ExtJS.

(continua…)

, , , ,

Sencha – Slide, Fade, Highlight: effetti grafici con ExtJs

febbraio 15th, 2011 - (1 Comments)


sencha extjs

fonte: dal web

Fornire effetti visuali interessanti e piacevoli ad una applicazione è un elemento importante nella progettazione ed implementanzione delle interfacce grafiche: grazie ad essi infatti possiamo non solo fornire informazioni e feedback all’utente finale in maniera semplice ed estremamente intuitiva e gradevole, ma anche e soprattutto rendere la navigazione del sito piacevole e decisamente più accattivante.

In questo tutorial vedremo alcuni dei più importanti effetti grafici che Sencha ExtJs ci permette di applicare agli elementi della nostra interfaccia. Vedremo come, con pochissime righe di codice e con qualche accortezza, possiamo dare alle nostre interfacce tutto un altro aspetto.

(continua…)

, , , ,

ExtJs – Gestione di un albero in un layout complesso con PHP

gennaio 19th, 2011 - (0 Comments)


sencha extjs

fonte: dal web

In questo articolo vedremo come gestire in un layout complesso un tree panel ExtJs con PHP. Il tree panel è un componente ExtJs che ci permette di gestire una categorizzazione di elementi attraverso l’utilizzo di un albero: l’albero è molto comodo per gestire grandi quatità di dati, perchè essendo una struttura gerarchica risulta chiara e semplice da utilizzare per l’utente finale.

Un “layout complesso” è un layout che combina insieme diverse strutture, in modo da creare delle interfacce più ricche di informazioni e che, interagendo tra loro, permettono di usufruire delle informazioni in maniera più chiara e diretta. Prima di iniziare ad analizzare il codice, cerchiamo di focalizzare quanto vogliamo ottenere. Il risultato finale di questo tutorial è disponibile al seguente indirizzo.

(continua…)

, , , , ,

ExtJs – Layout complessi ed altre utili risorse

gennaio 4th, 2011 - (0 Comments)


sencha extjs

fonte: dal web

Oggi vi segnalo una delle risorse più interessanti disponibili attualmente in rete per vedere all’opera il framework javascript Sencha ExtJs: vediamo un pò più in dettaglio cosa possiamo trovare nelle Saki’s Extensions.

Questo sito combina alcuni degli esempi più interessanti disponibili sul sito ufficiale di Sencha ExtJs in demo davvero notevoli: il risultato è un insieme di demo utilissime per chi vuole approfondire o conoscere le potenzialità di  Sencha ExtJs , come ad esempio il CheckTree Panel (un tree esteso che permette di selezionare i nodi di un albero grazie ad una checkbox) e l’ArrayTree (che permette di creare un tree partendo da un array statico di elementi).

(continua…)

, , ,

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

dicembre 22nd, 2010 - (0 Comments)


sencha extjs

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?

(continua…)

, ,

ExtJs – Integrazione tra PHP e ExtJS con JSON

novembre 24th, 2010 - (16 Comments)


PHPExtJs (oggi Sencha) è uno dei principali framework javascript attualmente disponibili: è potente, flessibile, cross-platform, ed è probabilmente uno degli strumenti più veloci per realizzare rich internet applications. In questo articolo vedremo i concetti principali che permettono di integrare ExtJs in una web application PHP-based attraverso il protocollo JSON.

(continua…)

, , , , ,

ExtJs, inviare un array nelle chiamate Ajax

maggio 19th, 2010 - (1 Comments)


Le chiamate asincrone sono ormai un fondamento delle interfacce web, e praticamente tutti i principali framework javascript in circolazione forniscono degli strumenti embedded che semplificano lo sviluppo e automatizzano la maggior parte delle impostazioni.

ExtJs è un framework javascript che è riuscito ad ottenere forti consensi nell’ambito dello sviluppo di interfacce web: questo grazie soprattutto alla potenza del prodotto e alla comunità decisamente attiva che fornisce un importante supporto agli sviluppatori.

Il meccanismo implementato da questo  framework per eseguire chiamate Ajax è estremamente semplice ed intuitivo, meccanismo che tra le altre cose ricorda molto da vicino quello adottato da altri framework javascript come JQuery. Vediamone un esempio:

Ext.Ajax.request({
[…]
url: ‘pagina.php’,
params: {id: ‘3’},
success: function(resp) {
[…]
} ,
failure: function(a, b) {
[…]
}
});

Con queste poche righe di codice, ExtJs ci permette di eseguire una chiamata Ajax verso l’indirizzo specificato nel parametro di configurazione “url” (pagina.php) e di gestire sia il caso di risposta positiva sia il caso di insuccesso.
“params” invece permette di specificare i parametri che verranno inviati al file “pagina.php” durante la chiamata Ajax: nel nostro esempio inviamo un parametro con identificativo “id” che contiene il valore 3.

E se volessimo inviare un array? Nessun problema, ci viene in aiuto JSON.

ExtJs è chiaramente progettato per fornire pieno supporto a JSON, dunque possiamo sfruttare questo protocollo. Codifichiamo quindi il nostro array utilizzando le funzioni che ExtJs ci mette a disposizione, come ad esempio la seguente:

Ext.encode(array)

Supponendo quindi di voler inviare un array di valori con una chiamata Ajax il nostro codice potrebbe diventare:
Ext.Ajax.request({
[…]
url: ‘pagina.php’,
params: {data: Ext.encode(arrayData)},
success: function(resp) {
[…]
} ,
failure: function(a, b) {
[…]
}
});

Lato server, sarà sufficiente eseguire il decoding del parametro “data”, che giunge al server sottoforma di stringa JSON:

$myArray = json_decode($_POST[‘data’]);

, , ,