Sencha ExtJs – Renderizzare codice HTML in container 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.

Ci sono diversi modi per renderizzare codice HTML in un Container Sencha ExtJS, vediamo quelli più diretti:

Ext.onReady( function() {
      	new Ext.Panel({
    	    renderTo: Ext.getBody(),
            title: 'Esempio Blogrammazione: Html in ExtJs Container',
            items: [
                {
                      xtype: "panel",
                      html: new Ext.XTemplate("<a href='#'>{value}").apply({
                           value: 'Prima possibilit&agrave; possibilit&agrave; : XTemplate'
                       })
                 },
                {
                    html: "<a href='#'>Seconda opzione; attributo HTML del Panel</a>",
                    xtype: "panel"
                },
                {
                    xtype: 'box',
                    autoEl: {
                    tag: 'a',
                    html: 'Terza opzione: elemento creato con DomHelper',
                    href: '#'
                }
        }]
    });
});

Nel codice dell’esempio la prima cosa che facciamo è creare un Panel (riga 2) che verrrà reinderizzato nel tag HTML “body” (riga 3) che ci servirà per contenere le tre soluzioni che vediamo ora in dettaglio.

Le righe 6-11 definiscono un componente Panel del quale utilizziamo la proprietà “html”: qui creiamo un componente “XTemplate” nel quale scriviamo il codice HTML che vogliamo visualizzare nel Panel.

Anche nelle righe 12-15 definiamo un componente Panel del quale utilizziamo la proprietà “html”, ma questa volta senza “XTemplate”, quindi in maniera più semplice e diretta il codice HTML che scriviamo nella proprietà “html” verrà visualizzato nel corpo nel Panel in questione.

L’esempio più curioso ed interessante è sicuramente il terzo (righe 16-22): utilizzando la proprietà “autoEl” ExtJs richiama il DomHelper, un componente in grado di creare un elemento DOM a runtime. Nella sostanza quello che succede all’interno del componente “box” è che a runtime viene creato un link HTML (il tag da creare lo definiamo grazie alla proprietà “tag” – riga 19) che punta alla pagina stessa (impostazione della proprietà “href” con valore “#” – riga 21).