About author  I am Java/oracle professional.Working on Java/J2EE technologies and i.e Java,J2ee,Oracle ADF,hibernate,J2ee,PL/sql,Apps for 4+ years.I am passionate about learning new technologies.I am sharing my knowledge. Give your views and suggestion on vinay@techartifact.com 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
form

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

pimp it

7 Responses to Simple form Using ExtJs


  1. mats@mankz.comNo Gravatar
    Jul 22, 2009

    You forgot to include/mention s.gif… :)


  2. eichawsanNo Gravatar
    Sep 24, 2009

    hi….
    Which extension do I have to use for saving this code?

    Thanks


  3. vinayNo Gravatar
    Sep 24, 2009

    .js only.It will be javascript file only.Ext js is extended javascript.so extenion will be same.


  4. KasbinNo Gravatar
    Feb 25, 2010

    Thanks for the effort to make novice developers make understand Ext at a glance.
    But its better if you make it more advanced.


  5. sudhaNo Gravatar
    Sep 26, 2011

    how to execute the code after saving it with .js


  6. NewtoSenchaNo Gravatar
    Jan 07, 2012

    Hi Vinay,

    Thank you for a good example. Am new and have similar background. Been a java /frameworks pro for years, and switching to ExtJS.

    Have a great year, and looking forward for more examples from you.

Trackbacks/Pingbacks

  1. PimpThisBlog.com

Leave a Reply