Background theory/notes about Sencha ExtJS forms and the form panel

By Alvin Alexander. Last updated: June 24, 2016

I’ve been working with Sencha forms a little bit lately, especially Sencha ExtJS 4 forms and the form panel (Ext.form.Panel), and I’ve found these background/theory notes about forms to be helpful:

When you create a form, you’ll want to create it with an Ext.form.Panel instance. That seems obvious in retrospect, but I originally tried to create a form with an Ext.panel.Panel instance.
Internally, a form panel contains an instance of Ext.form.Basic, which provides all of the validation, submission, and field management required by a form.
You access the Ext.form.Basic instance with the getForm() method.
You typically submit a form by defining a handler on a Button. That code looks like this: handler: submitFormHandler, where submitFormHandler references a function you’ll write to submit the form.
The submit method is defined in Ext.form.Basic; this is really a shortcut to Ext.form.action.Submit. This class handles the form submission; in the simplest case, all you have to do is give it a URL where you want the data to be submitted to.
Ext.form.Basic has a method named getValues which gets the values from your form. (It loops through each field in your form and calls getValue on each field.)

Many of these notes come from the book, Ext JS 4 Web Application Development Cookbook, which provides a better explanation of Sencha form theory than I’ve seen anywhere else.

Important classes

As you can tell from that discussion, the following classes are important to creating Sencha forms:

Form fields

Of course form fields are also very important, and you can find those fields defined inside the Ext.form package. The most important things I can say about Sencha form fields today are:

Form fields extend the Ext.Component class, which lets you use them in form layouts.
In general, use getValue and setValue to work with form field values.

Form validations

I haven’t done much with form field validations yet, but I know those are done with VTypes.

An example form panel

The Ext.form.Panel class has the following example Sencha ExtJS form panel code. As you can see, it defines a url field, along with other form attributes:

Ext.create('Ext.form.Panel', {
    title: 'Simple Form',
    bodyPadding: 5,
    width: 350,

    // The form will submit an AJAX request to this URL when submitted
    url: 'save-form.php',

    // Fields will be arranged vertically, stretched to full width
    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },

    // The fields
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'First Name',
        name: 'first',
        allowBlank: false
    },{
        fieldLabel: 'Last Name',
        name: 'last',
        allowBlank: false
    }],

    // Reset and Submit buttons
    buttons: [{
        text: 'Reset',
        handler: function() {
            this.up('form').getForm().reset();
        }
    }, {
        text: 'Submit',
        formBind: true, //only enabled once the form is valid
        disabled: true,
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    success: function(form, action) {
                       Ext.Msg.alert('Success', action.result.msg);
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('Failed', action.result.msg);
                    }
                });
            }
        }
    }],
    renderTo: Ext.getBody()
});

Notice that a handler is defined on the form button, and it shows how to submit the form to the url.

sencha

form