Simple form Using ExtJs

---

About author  I am Oracle/Java professional.Working on J2EE technologies and i.e Oracle ADF,Java,J2ee,PL/sql,Top Link,Apps for 2+ years.I am passionate about learning new technologies.I am sharing my knowledge. Give your views and suggestion. http://www.linkedin.com/in/vinaykumar2 Read more from this author

---

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

Read more post on extjs form using extjs Java Javascript Simple form Using ExtJs 

5 comments | Add One

Leave a Comment

Name:

E-Mail :

Website :

Comments :