HeadStart of java script

I am trying to learn javascript.there is some more exmaple, which can help for beginner in java script.In this first exmaple.We are creating an Html page.In this we are writing a funtion named

RandomNumber which will generate random number.I am taking sine from it and take the absolute value. This will get a number between 0 and 1.For every millisecond time changes and we got some unique number.In the script we use RandomNumber function.

head_start1
In the second example I am writing code for email validation in java script for input text.User will enter email.If user will not entered ‘@’ in email address.Then it will give alert of invalid email address.

head_start2

pimp it

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
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

What is Ext-Js(Extended JavaScript)

Ext-JS is a open source JavaScript library for building interactive web applications[2] using techniques such as AJAX, DHTML and DOM scripting.It is easy to use,rich user interface and more it can be a desktop application. It includes:
• High performance, customizable UI widgets
• Well designed and extensible Component model
• An intuitive, easy to use API
• Commercial and Open Source licenses available

Ext-js have a vast range of GUI-based form controls for use within web applications, these contains:
• text field and textarea input
• date fields with a pop-up date-picker
• numeric fields
• list box and comboboxes
• radio and checkbox controls
• html editor control
• grid control
• tree control
• tab panels
• toolbars
• desktop-application-style menus
• region panels to allow a form to be divided into multiple sub-sections
• sliders
Many of these controls are able to communicate with a web server using AJAX.

Files you can need in using Ext
Ext-all.css — A stylesheet file that control the look and feel of Ext widgets.This file must be Included without modification.
Ext-base.js — This provide core functionality of Ext.It is basic machinery of EXT.for using other Library like jquery we need to change this file.
ext-all-debug.js/ext-all.js — All of the widgets live in this files.This is primary ext library file.

It is not a other Java Script library. It can work with other java script libararies by using adapters.For that You need to include adapter file that is exist in adpater folder of Ext sdk.

Default Ext adapter :

 
<script src =”lib/extjs/adapter/ext/ext-base.js”></script>

For jquery include these files in top of your document:

 
<script src =”lib/jquery.js”></script>
<script src =”lib/jquery-plugins.js”></script>
<script src =”lib/extjs/adapter/jquery/ext-jquery-adapter.js”></script>

After including adapters and base libraries we need to include ext-all.js or ext-all-debug.js file.Localization is possible in Ext-js.Only you need to include language file in lib folder.

Common elements in Ext-

Ext.onReady – This function makes sures that our document is ready to be work.It make our code to Wait until the DOM is available.This is needed because javaScript starts executing as soon as it enocuntered in the documents,at which point our DOM might not exist.

Ext.MSg.show – This function for creating the dialog.It will handle all care needed to have dialog. It will create appilication style messages boxes for us.

Ext.get – This function accesses and manipulates elements in the DOM.

Adapter: Files that allows you to use to other java script libraries with Ext-Js.

References : www.extjs.com
kick it on DotNetKicks.com

Shout it

pimp it