ExtJS 4.2

by Ben

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
<div id="ct"></div>

JavaScript

Ext.define('ExtMVC.view.page.List', {
    extend: 'Ext.panel.Panel',
    alias : 'widget.pageform',
    title : 'Form binding example',
    bodyPadding : 5,
    layout : 'anchor',
    height : 400,
    width : 300,
    items : [{
        xtype: 'textfield',
        id : 'name',
        name: 'name',
        anchor : '100%',
        fieldLabel: 'Name',
        allowBlank: false
    },{
        xtype: 'textfield',
        id : 'firstname',
        name: 'firstname',
        anchor : '100%',
        fieldLabel: 'First Name',
        allowBlank: false
    },{
        xtype: 'textfield',
        id : 'city',
        name: 'city',
        anchor : '100%',
        fieldLabel: 'City',
        allowBlank: false
    },{
        xtype : 'button',
        margin : '10 0 0 0',
        text : "Save",
        handler: function(e) {
            if (Ext.getCmp('name').getValue() == '' || Ext.getCmp('name').getValue() == null) {
                Ext.Msg.alert('Error', 'Name field is empty !');
                return;
            }
            if (Ext.getCmp('firstname').getValue() == '' || Ext.getCmp('firstname').getValue() == null) {
                Ext.Msg.alert('Error', 'First Name field is empty !');
                return;
            }
            if (Ext.getCmp('city').getValue() == '' || Ext.getCmp('city').getValue() == null) {
                Ext.Msg.alert('Error', 'City field is empty !');
                return;
            }

            Ext.Msg.alert('Status', 'All your fields are filled  !');
            // TODO : you can do your actions here, all your textfields are filled !    
        } 
    }]
});

Ext.widget('pageform', {renderTo: 'ct'});