Simple form Using ExtJs

Extjs is mainly used for UI design.Today I will create a simple form using this.And I will explain code also. So that any beginner can understand easily.

 

Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';

    var bd = Ext.getBody();
    var simple = new Ext.FormPanel({
        labelWidth:  85, 
        frame:true,
        title: 'Vinay Form',
        bodyStyle:'padding:10px 10px 0',
        width: 450,
        defaults: {width: 250},
        defaultType: 'textfield',

        items: [{
                fieldLabel: 'Customer Name',
                name: 'first',
                allowBlank:false
            },{
                fieldLabel: 'Customer Last Name',
                name: 'last'
            },{
                fieldLabel: 'Address',
                name: 'company'
            }, {
                fieldLabel: 'Email',
                name: 'email',
                vtype:'email'
            }, new Ext.form.TimeField({
                fieldLabel: 'Time',
                name: 'time',
                minValue: '8:00am',
                maxValue: '6:00pm'
            })
        ],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

    simple.render(document.body);

After writing this code Form would be looking like below example

Ext.onReady(function(){ —– This function provides a way to make our code wait until the DOM is available, before doing anything.

Ext.QuickTips.init(); — It will display error with field in oval style.
Ext.form.Field.prototype.msgTarget = ‘side’; – Message will print on side of form field
var bd = Ext.getBody();
var simple = new Ext.FormPanel({ — Created a variable of Form panel
labelWidth: 85,
frame:true,
title: ‘Vinay Form’,
bodyStyle:’padding:10px 10px 0′, —- Setting the properties
width: 450,
defaults: {width: 250},
defaultType: ‘textfield’,

items: [{ Here we are creating the item for form.

fieldLabel: ‘Customer Name’,
name: ‘first’,
allowBlank:false
},{
fieldLabel: ‘Customer Last Name’,
name: ‘last’
},{ ……………….

Form is looking after writing this code with email validation also and combo box of time also.I hope it would clear some concept of EXT JS.UI design in ExtJs is easy.

For more detail go to www.extjs.com