Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Ext.js

Pagine:

RSS

Ext.js, temi e layout

di: Nunzio Fiore 30 Giugno 2008

Estendiamo l'esempio con un layout per ogni tab

Copiamo il nostro esempio dei temi in un altro file di nome layout.html e iniziamo a lavorare su quello. L'HTML rimarrà uguale e identico, tranne il Javascript che viene incluso, che non sarà più theme.js ma layout.js, in modo da tenere i nostri due esempi separati.

Estendiamo i diversi contenuti HTML che avevamo settato nell'attributo ‘html' dei vari tab, aggiungendo l'attributo layout e i contenuti che vogliamo esporre. Otterremo un codice simile a questo:

      items:[{
      		title: 'Io contengo dei pannelli accordion',
      		frame:true,layout:'accordion',
      		items: [
      		new Ext.Panel({title:'Primo accordion',frame:true,
      		html:'Contenuto del primo accordion'}),
      		new Ext.Panel({title:'Secondo accordion',frame:true,
      		html:'Contenuto del secondo accordion'}),
      		new Ext.Panel({title:'Terzo accordion',frame:true,
      		html:'Contenuto del primo accordion'}),
      		new Ext.Panel({title:'Quarto accordion',frame:true,
      		html:'Contenuto del secondo accordion'})
      		]
      },{
      		title: 'Io contengo tre pannelli con layout border',
      		frame:true,	layout:'fit',layout:'border',
      		items: [
      			{title: 'Footer',region: 'south',frame:true,
      			html:'Contenuto del pannello di sotto'},
      			{title: 'Navigation',region:'west',frame:true,
      			html:'Contenuto del pannello di sinistra'},
      			{title: 'Main Content',region:'center',
      			frame:true,collapsible:false,
      			html:'Contenuto del pannello centrale'}
      		]
      },{
      		title: 'Io contengo un esempio di Card layout',
      		frame:true,
      		id:'card-panel',
      		layout:'card',
      		activeItem: 0, // index or id
      			bbar: ['->', {id: 'card-prev',
      			text: '« Precedente',
      			handler: cardNav.createDelegate(this, [-1]),
      			disabled: true},{id: 'card-next',
      			text: 'Successivo »',
      			handler: cardNav.createDelegate(this, [1])
      }],
      	items: [{id: 'card-0',html: 'Contenuto del primo pannello!'},
      		{id: 'card-1',html: 'Contenuto del secondo'},
      		{id: 'card-2',html: 'Terzo pannello!'}]
      	}]

L'esempio completo è visibile in questa pagina.

È anche disponibile un pacchetto zip contenente tutto quanto visto nel corso dell'articolo.

Conclusioni e anticipazioni

Con questo articolo, abbiamo voluto fornire una panoramica su temi e layout e due esempi completi e funzionanti che possono essere riutilizzati per i propri siti. In questo abbiamo preso ulteriormente confidenza con la struttura JSON tipica delle strutture Ext, inoltre siamo pronti ad affrontare nei prossimi articoli l'utilizzo più approfondito degli elementi che compongono le interfacce Ext.