Microsoft's Internet Explorer browser has no built-in vector graphics machinery required for "loss-free" gradient background themes.

Please upgrade to a better browser such as Firefox, Opera, Safari or others with built-in vector graphics machinery and much more. (Learn more or post questions or comments at the Slide Show (S9) project site. Thanks!)

ExtJS - II

Javascript RIA Framework

Master "Tecnologie OpenSource"

Form 1/3

I form in ExtJS, grazie alla struttura a componenti e alla configurabilità dei componenti lo sviluppo di form complessi è semplice quanto la creazione di un layout.

Il componente ExtJS che rappresenta un form HTML è Ext.form.FormPanel:

Form 2/3

Un Ext.form.FormPanel è in effetti un Ext.Panel contenente un componente Ext.form.BasicForm.

All’interno di un form saranno contenuti (come suoi item) diverse tipologie di input widget:

Form 3/3

NOTA: nella APIDOC relativa alla classe Ext.Component sono elencati gli xtype di questi come di tutti gli altri componenti standard.

Submit

ExtJS (essendo un framework AJAX) di default eseguirà un submit di tipo AJAX (eseguito quindi attraverso una XMLHTTPRequest costruita in javascript).

E’ possibile comunque effettuare il submit classico configurando opportunamente Ext.form.FormPanel/Ext.form.BasicForm

ESEMPIO

Form con submit classico

ESEMPIO

JSON Form: caricamento remoto da JSON e submit AJAX

SimpleStore

Accanto ai form, ExtJS fornisce un potente livello di astrazione per l’accesso ai dati.

Una delle tipologie più semplici è il SimpleStore:

new Ext.data.SimpleStore({
  fields: ['descr', 'role'],
  data : [
    ["Software Developer", "developer"],
    ["System Administrator", "sysadmin"],
    ["Manager", "manager"]
  ]
});

Validazioni

Inoltre ExtJS fornisce un sistema di validazioni client-side (da non intendersi come sostitutive dei controlli di validazioni server-side!!!), alcuni componenti effettuano alcuni controlli di validazioni di default (ad esempio DateField), in altri casi dovremo richiederlo esplicitamente attraverso vtype, una config option dei componenti Field

{
  fieldLabel: 'Email',
  name: 'email',
  vtype:'email', // NOTA: validazioni predefinita
  width:190
},
...
new Ext.form.DateField({
  fieldLabel: 'Date of Birth',
  name: 'dob',
  width:190,
  allowBlank:false
})

Valori contenuti in un form

Per ottenere i valori contenuti in un form è sufficiente utilizzare la funzione getFieldValues contenuta nel componente Ext.form.BasicForm (accessibile attraverso l’attributo form del componente Ext.form.FormPanel)

Ext.getCmp("my-form").form.getFieldValues())

Form load e submit 1/2

Il componente Ext.form.BasicForm consente il caricamento e submit programmatico del form mediante le funzioni load e submit :

fs.form.load({
  url:'/json/load_form',
  method:'GET',
  waitMsg:'Loading',
  success:function(form, action) {
    Ext.MessageBox.alert('Message', 'Loaded OK');
  },
  failure:function(form, action) {
    Ext.MessageBox.alert('Message', 'Load failed');
   }
});

Form load e submit 1/2

fs.form.submit({
  url:'/post/ajax',
  waitMsg:'Saving Data...',
  success: function (form, action) {
    Ext.MessageBox.alert('Message', 'Saved OK');
  },
  failure:function(form, action) {
    Ext.MessageBox.alert('Message', 'Save failed');
  }
});

Grid 1/2

Un altra potente quanto invidiata componente del framework sono le grid, componenti il cui scopo è organizzare dei dati all’interno di una tabella.

ExtJS implementa un componente grid con tutte le funzionalità più user-oriented (ordinamento per colonna, grouping, toolbar, paging, spostamento delle colonne mendiante drag&drog etc.)

Grid 2/2

Ogni GridPanel necessiterà di alcuni sotto-componenti obbligatori:

Ext.data.Store e i Reader

Come accennato precedentemente il livello di astrazione per l’accesso ai dati di ExtJS è molto flessibile e permette di scalare in maniera molto semplice dalla sorgente dati in forma di Array sino ai dati serializzati in JSON da un’applicazione Web Remota.

A seconda della sorgente dati si dovrà scegliere il Reader adeguato:

ColumnModel e il renderer

All’interno del ColumnModel sarà possibili invece personalizzare alcune delle caratteristiche della visualizzazione dei nostri dati:

columns: [
  {header: "Title", dataIndex: 'title'},
  {header: "Director", dataIndex: 'instructor'},
  {header: "Start Date", dataIndex: 'start',
   renderer: Ext.util.Format.dateRenderer('m/d/Y')},
  {header: "Area", dataIndex: 'area'}
]

ESEMPIO

Grid Semplice

Programming in the large

Man mano che l’applicazione lato browser aumenta in dimensioni e complessità (e data la grande potenza e flessibilità di ExtJS è solo questione di tempo…) diventa sempre più utile (fino a diventare vitale) riuscire ad organizzare il nostro codice in modo da garantirne la componibilità/manutenibilità e riusabilità.

Definire un namespace

ExtJS ci fornisce una funzione per la creazione dei namespace, la quale a partire da una stringa crea tutti gli oggetti (se non esistono già) necessari a ottenere il namespace richiesto:

Ext.namespace("ALCA.examples");

Al termine di questa funzione ci sarà un oggetto examples contenuto nell’oggetto ALCA.

Preconfigurare un componente

ALCA.examples.MyGrid = Ext.extend(Ext.GridPanel,{
  title: 'Course Grid',
  height: 200,
  widht: 500,
  frame: true
});

new ALCA.examples.MyGrid({
  renderTo: document.body,
  store: store,
  columns: columns
});

Overloading dei metodi

ALCA.examples.MyGrid = Ext.extend(Ext.GridPanel,{
  title: 'Course Grid',
  frame: true,
  width: 500,
  height: 200,

  initComponent: function() {
    if (this.store === undefined) {
       //this.store = STORE CREATION

       this.store.load();
    }

    if (this.columns === undefined) {
       //this.columns = COLUMN DEFINITION
    }

    ALCA.examples.MyGrid.superclass.
      initComponent.call(this);

  }
});

Refactored

Ext.onReady(function() {
  new ALCA.examples.MyGrid({
    id: "my-grid-id",
    renderTo: document.body
  });
});

Lazy instantiation

E’ possibile inoltre associare dei nuovi xtype per le nostre classi, consentendoci l’utilizzo dei nostri componenti all’interno di complesse definizioni JSON delle interfacce da generare:

Ext.reg('mygrid',ALCA.examples.MyGrid);

Ext.onReady(function() {
new Ext.Viewport({
    layout: 'border',
    items: [{
        region: 'north',
        html: 'NORTH',
        autoHeight: true,
        border: false,
        margins: '0 0 5 0'
    }, {
        region: 'west',
	html: 'WEST',
        collapsible: true,
        title: 'Navigation',
        width: 200,
        autoScroll: true,
        split: true,
    }, {
        id: 'my-grid-ID',
        region: 'center',
        xtype: 'my-grid',
    }, {
        region: 'south',
        title: 'Information',
        collapsible: true,
        html: 'Information goes here',
        split: true,
        height: 100,
        minHeight: 100
    }]
});Ext.reg('mygrid',ALCA.examples.MyGrid);

Ext.onReady(function () {
  new Ext.Viewport({
    layout: 'border',
    renderTo: document.body,
    items: [{
        region: 'north',
        html: 'NORTH',
        autoHeight: true,
        border: false,
        margins: '0 0 5 0'
    }, {
        region: 'west',
	html: 'WEST',
        collapsible: true,
        title: 'Navigation',
        width: 200,
        autoScroll: true,
        split: true
    }, {
        id: 'grid-ID',
        region: 'center',
        xtype: 'mygrid'
    }, {
        region: 'south',
        title: 'Information',
        collapsible: true,
        html: 'Information goes here',
        split: true,
        height: 100,
        minHeight: 100
    }]
  });
});

ESEMPIO

Ext.extend-ed Grid

Approfondimenti

Link utili

Copyright (C) 2008 - Alca Societa' Cooperativa

http://alca.le.it - info@alca.le.it

released under CreativeCommons 2.5 by-nc-sa

NOTA: le immagini dei software e dei device contenuti
nella presentazione sono proprieta' dei relativi detentori
del copyright e sono state riprodotte a scopo esclusivamente didattico.