Extending ExtJs – Seconda parte

Settimana scorsa ho scritto un breve post che spiegava come estendere una classe ExtJs per crearne una propria.

Oggi vi voglio mostrare come ho modificato quell’esempio per rendere ancora più semplice il mio lavoro.

Le problematiche infatti dell’esempio della scorsa settimana erano legate per lo più all’impossibilità di validare l’intera form e soprattutto l’impossibilità di chiudere la finestra.

var ContactForm = Ext.extend(Ext.Window, {
    width: '400',
    modal: true,
    title: 'Nuovo Contatto',
    layout: 'fit',
    projectId: 0,
    frame: true,

    initComponent: function () {

        this.items = [{
            xtype: 'form',
            layout: 'form',
            height: 350,
            ref: 'form',
            buttonAlign: 'right',
            defaults: {
                anchor: '-20'
            },
            frame: true,
            bodyStyle: 'padding:5px',
            items: [{
                xtype: 'textfield',
                id: 'company',
                ref: 'company',
                fieldLabel: 'Società',
                allowBlank: false
            },
            {
                xtype: 'textfield',
                id: 'webSiteAddress',
                ref: 'webSiteAddress',
                fieldLabel: 'Sito web',
                allowBlank: true
            },
            {
                xtype: 'textfield',
                id: 'emailAddress',
                ref: 'emailAddress',
                fieldLabel: 'E-Mail',
                allowBlank: true
            },
            {
                xtype: 'textfield',
                id: 'address',
                ref: 'address',
                fieldLabel: 'Indirizzo',
                allowBlank: true
            },
            {
                xtype: 'textfield',
                id: 'zip',
                ref: 'zip',
                fieldLabel: 'CAP',
                allowBlank: true
            },
            {
                xtype: 'textfield',
                id: 'city',
                ref: 'city',
                fieldLabel: 'Città',
                allowBlank: true
            },
            {
                xtype: 'textfield',
                id: 'province',
                ref: 'province',
                fieldLabel: 'Provincia',
                allowBlank: true
            },
            {
                xtype: 'textfield',
                id: 'phoneNumber',
                ref: 'phoneNumber',
                fieldLabel: 'Telefono',
                allowBlank: true
            },
            {
                xtype: 'textfield',
                id: 'faxNumber',
                ref: 'faxNumber',
                fieldLabel: 'Fax',
                allowBlank: true
            }

            ],
            fbar: {
                xtype: 'toolbar',
                items: [{
                    xtype: 'button',
                    text: 'Inserisci',
                    scope: this,
                    minWidth: 75,
                    iconCls: 'person-new',
                    handler: this.onSubmit
                }]
            }
        }];

        ContactForm.superclass.initComponent.call(this, arguments);

    },

    onSubmit: function () {
        var msgMask = Ext.MessageBox.wait('Attendere prego...');

        if (this.form.getForm().isValid()) {
            DirectContacts.AddPerson(
            parseInt(this.projectId),
            this.form.company.getValue(),
            this.form.webSiteAddress.getValue(),
            this.form.emailAddress.getValue(),
            this.form.address.getValue(),
            this.form.zip.getValue(),
            this.form.city.getValue(),
            this.form.province.getValue(),
            this.form.phoneNumber.getValue(),
            this.form.faxNumber.getValue(),),
            function (result, e) {
                if (result.success) {
                    Ext.MessageBox.hide();

                    new Ext.ux.Notification({
                        iconCls: 'x-icon-information',
                        title: 'Contatto inserito',
                        html: 'Il contatto è stato inserito correttamente.',
                        autoDestroy: true,
                        hideDelay: 3000
                    }).show(document);
                }
                else {
                    Ext.MessageBox.show({
                        title: 'Errore',
                        msg: result.error,
                        buttons: Ext.MessageBox.OK,
                        animEl: 'submitButton',
                        icon: Ext.MessageBox.ERROR
                    });
                }

                this.close();
            }, this);
        }
        else {
            Ext.MessageBox.hide();

            new Ext.ux.Notification({
                iconCls: 'x-icon-error',
                title: 'Contatto non inserito',
                html: 'Compilare tutti i campi obbligatori.',
                autoDestroy: true,
                hideDelay: 3000
            }).show(document);
        }
    }
});

// register xtype to allow for lazy initialization
Ext.reg('mcContactForm', ContactForm);

Da notare è soprattutto il this (alla riga 142) inserito come ultimo parametro nella chiamata al metodo DirectContacts.AddPerson (di tipo Ext.Direct). Il this è lo scope della funzione handler e pertanto all’interno della funzione posso chiamare this.close() per chiudere la Ext.Window.

Ho perso più di un ora per capire come funzionassero gli scope in ExtJs; senza quel this infatti l’handler tentava di chiudere la finestra del browser!

Potete poi vedere che ho sostituito le dichiarazioni esplicite di oggetti (new TextField per esempio) con la loro controparte in LazyLoading. Questa modifica mi permette di caricare in memoria quegli oggi solo quando realmente necessari, rendendo il codice javascript dell’applicazione più veloce.