In this section, we will learn about how to make a simple form Extjs and how to change the Extjs theme, so that form looks nice. But before continuing, you must have an installer of Extjs, you can download the latest version of Extjs from its official site http://www.extjs.com/products/extjs/download.php. The latest version of Extjs was ext-2.2.1.

Furthemore, if you successfully to download it, place that installer in your drive computer.Example,this is my drive C:\xamp\htdocs\Defafe\ext-2.2.1.

Ok, now we get ready to start this tutorial.

1. index.html

//this tutorial using xtheme-vistablue.


//include file SimpleForm.js

Source code must be on the order

2. SimpleForm.js

Ext.onReady(function(){
Ext.QuickTips.init();
var SimpleForm = new Ext.FormPanel({
labelWidth: 90, // label settings
frame:true,
width:300,
autoHeight:true,
padding:200,
defaultType: 'textfield',

items: [{
fieldLabel: 'Full Name',//name of label
name: 'first',//name of field,
allowBlank:false
},{
fieldLabel: 'Address',
name: 'address'
},{
fieldLabel: 'Email',
name: 'email',
vtype:'email'//validation email
}
],

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

var createwindow = new Ext.Window({
frame:true,
title: 'Simple Form',
width:315,
height:180,
closable: false,
items: SimpleForm
});
createwindow.show();

});

Here is  screen shot of this tutorial

Tags: Address Name, CSS, Data Formats, Download Php, Drive C, Drive Computer, extjs, FAQs Help and Tutorials, Htdocs, HTML, JavaScript, Padding, Source code, Style Sheets, True Title, True Width, Validation, Webserver directory index, Window Frame, Xamp

Incoming search terms for the article:

simple form extjs , xamp extjs , extjs 2 2 1 ext window autoheight , extjs xtheme-vistablue , XML tag name mismatch (expected img) extjs , XML tag name mismatch (expected img) fileupload extjs themes , extjs file upload , extjs theme , extjs upload , extjs upload file , extjs grid checkbox , extjs tutorial , extjs login , extjs grid paging , extjs login form extjs checkbox readonly , checkbox row extjs , upload image extjs mysql , extjs file upload tutoriel , tutoriel extjs , extJS checkbox datastore , FileUploadField extjs documentation , icon-user-delete extjs , getSelectionModel() getSelections(); , register extjs application 

This entry was posted by faisal at on Monday, February 9th, 2009 at 9:01 pm and is filed under Tutorial Extjs, Tutorial HTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.