ExtJs : Getting Started

Ext JS is a cross-browser JavaScript framework for building rich internet applications. It is also the foundation for Ext Designer, a desktop application that allows you build Ext JS web apps, and Sencha Touch, a mobile app framework for modern touch-based devices.

Advantages:

  • Cross browser compatibility
  • MVC architecture and Object Oriented approach
  • No plugins (like java,Flex,Silverlight) required
  • Documentation and online support
  • Powerful controls available like grid, data store, panels, tab panels, windows and others which reduce your effort and time for rich application development.

Quick Hands on

Pre-Requisites

  • ExtJS  – Download from there official site. I am using 4.2.1 version
  • Browser – Preferably Firefox/Chrome
  • Web Server – If you are dealing with backend data.

Typical folder structure:

HelloWorldProjectStructure

index.html


<!DOCTYPE html></span>
<!DOCTYPE html>
<html>
<head>
 <title>Hello Ext</title>

 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
 <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
 <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

app.js


Ext.application({
name : 'HelloExt',
launch : function() {
Ext.create('Ext.container.Viewport', {
 layout : 'fit',
 items : [ {
 title : 'Hello Ext',
 html : 'Hello! Welcome to Ext JS.'
 } ]
 });
 }
});

Now run Hello.html on browser.

HelloWorld

Lets get into a bit details on the above. As you can see, we used ext-all.css for our stylesheet. For ExtJS lib you can either pre load large file for entire ExtJS or you can load portion of ExtJS on demad.

To preload all ExtJS classes use:
ext-all.js : minified, no JSDoc, no console warnings : Production Env
ext-all-debug.js : non-minified, with JSDoc, no console warnings : Debugging
ext-all-dev.js : non-minified, with JSDoc, with console warnings : Development

To load classes on demand:
ext.js : minified, no JSDoc, no console warnings : Production Env
ext-debug.js : non-minified, with JSDoc, no console warnings : Debugging
ext-dev.js : non-minified, with JSDoc, with console warnings : Development

If you are using ext-debug.js instead of ext-all-debug.js you need to add the following in your app.js:
Ext.require(‘Ext.container.Viewport’); //i.e load classes as required.

In HTML terms -the viewport is the part of the webpage that the user can currently see. The scrollbars move the viewport to show other parts of the page. To avoid any confusion, it is neither the size of the windows of your brower nor the screen resolution. For the same window size, a browser with more toolbars displayed will have a smaller viewport.
Its find of same in ExtJS, with build in features to control it more easily. The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page. You can then add other ExtJS UI components and containers in it. Like any Container, a Viewport will only perform sizing and positioning on its child Components if you configure it with alayout. 

To launch our ExtJS App we need to provide an entry point. Prior to ExtJS 4 one would use:

Ext.Onready(functuon(){
/*your code*/
};
From ExtJS4, preferred way is via launch config property:
Ext.application({launch:function(){
/*your code*/
}});
Ext.application is a mvc approach to start up an application on a single page, it has the ability to ensure all the given dependencies   and configuration is loaded. Configuration refer to models: [”], controllers: [”] and etc javascript is required by the applicati
on. Use Ext.onReady(..) for performance and only few component display. Such as with any existing HTML page you had for simple UI interaction.

Keep documentation handy on side and experiment with it. It has sample codes everywhere.

Lets add bit more things to our page. For simplicity lets use Ext.OnReady to quickly add fields.
Replace following code in your app.js:

 Ext.onReady(function(){
 Ext.create('Ext.panel.Panel', {
 bodyPadding: 5,
 width: 600,
 title: 'Registration',

 items: [
 {
 xtype: 'panel',
 layout: 'hbox',
 padding : 5,
 border :0,
 items: [{
 xtype: 'textfield',
 name: 'fname',
 fieldLabel: 'First Name',
 allowBlank: false,
 vtype: 'alpha'
 }, {
 xtype: 'textfield',
 name: 'lname',
 fieldLabel: 'Last Name',
 allowBlank: false,
 vtype: 'alpha'
 }]
 },{
 xtype: 'textfield',
 name: 'email',
 fieldLabel: 'Email',
 allowBlank: false,
 vtype: 'email'
 },{
 xtype: 'datefield',
 fieldLabel: 'DOB',
 allowBlank: false,
 editable : false
 },{
 xtype: 'button',
 text : 'Submit'
 }],
 renderTo: Ext.getBody()
});
});

Now run index.html again.

OnReady_test

As you can see, to get various fieds, we use xtype and place them accordingly. By default layout of panel is vertical, change by using layout ‘hbox’. You can add validation to your fields using attributes like allowBlank, vtype ext. vtype have some already written validation like ‘alpha’ for alphabets only, ’email’ for email etc.

An xtype is simply a name given to represent a class.xtype is a shorthand way to identify particular components: ‘panel’ = Ext.Panel, ‘textfield’ = Ext.form.TextField, etc.

This property provides a shorter alternative to creating objects than using a full class name. Using xtypes the most common way to define component instances, especially in a container. For example, the items in a form containing text fields could be created explicitly like so:

items:[Ext.create(‘Ext.form.field.Text’,{ fieldLabel:’Foo’}) ]

But by using xtype, the above becomes:

items:[{ xtype:’textfield’, fieldLabel:’Foo’}]

Play around more using document for practice and getting a feel of ExtJS. This is however not the recommended way. In real time application we would be using MVC architecture and placing our codes in various files.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: