So, what is Ext JS?

Exclusive offer: get 80% off this eBook here
Instant Ext JS Starter [Instant]

Instant Ext JS Starter [Instant] — Save 80%

Find out what Ext JS actually is, what you can do with it, and why it's so great with this book and ebook

₨387.00    ₨77.40
by Nagarajan Bhava | September 2013 | Open Source Web Development

In this article by Nagarajan Bhava, author of the book Instant Ext JS Starter, you will learn about Ext JS is a JavaScript library that makes it (relatively) easy to create cross-platform browser and desktop-style user interfaces in a web application. It supports the following:

  • Component model
  • Layouts
  • Plugin free charting
  • Drawing
  • CSS theming

(For more resources related to this topic, see here.)

JavaScript is a classless, prototype-oriented language but Ext JS follows a class-based approach to make the code extensible and scalable over time. Class names can be grouped into packages with namespaces using the object property dot-notation (.). Namespaces allow developers to write structured and maintainable code, use libraries without the risk of overwriting functions, avoid cluttering the global namespace, and provide an ability to encapsulate the code.

The strength of the framework lies in its component design. The bundled, basic default components can be easily extended as per your needs and the extended components can be re-used. A new component can also be created by combining one or more default components.

The framework includes many default components such as windows, panels, toolbars, drop-down menus, menu bars, dialog boxes, grids, trees, and much more, each with their own configuration properties (configs), component properties, methods, events, and CSS classes.

The configs are user-configurable at runtime while instantiating, whereas component properties are references to objects used internally by class. Component properties belong to the prototype of the class and affect all the instances of the class. The properties of the individual components determine the look and feel. The methods help in achieving a certain action. The user interaction triggers the equivalent Ext JS events apart from triggering the DOM events.

A cross-browser web application with header, footer, left column section with links, a content with a CSS grid/table (with add, edit, and delete actions for each row of the grid), and a form with few text fields and a submit button can be created with ease using Ext JS's layout mechanism, few default components, and the CSS theme.

For the preceding application, the border layout can be used with the north region for the header, south region for the footer, west region for the left column links, and center region for the content. The content area can have a horizontal layout, with the grid and form panel components with text fields and buttons.

Creating the preceding application from scratch without using the framework will take a lot more time than it would take by using it. Moreover, this is just one screen, and as the development progresses with more and more features, incorporating new layouts and creating new components will be a tedious process.

All the components or a group of components with their layout can be made a custom component and re-used with different data (that is, the grid data can be modified with new data and re-used in a different page).

Developers need not worry about the cross-platform compatibility issues, since the framework takes care of this, and they can concentrate on the core logic.

The helper functions of the Ext.DomQuery class can be used for querying the DOM. The error handling can be done by using the Ext.Error class, which is a wrapper for the native JavaScript Error object.

A simple webpage with a minimal UI too can make use of this framework in many ways.

Native JavaScript offers utility classes such as Array, Number, Date, Object, Function, and String, but is limited in what can be done with it across different browsers. Ext JS provides its own version of these classes that works in all the browsers along with offering extra functionality.

Any Ext JS component can be added to an existing web page by creating an instance of it. For example, a tab feature can be added to an existing web page by creating a new Ext JS Ext.tab tab component and adding it to an existing div container, by referring the div elements id attribute to the renderTo config property of the tab. The backend communication with your server-side code can be done by using simplified cross-browser Ext.Ajax class methods.

Ext JS 4 supports all major web browsers, from Internet Explorer 6 to the latest version of Google Chrome. The recommended browsers for development and debugging are Google Chrome 10+, Apple Safari 5+, and Mozilla Firefox 4+.

Both commercial and open source licenses are available for Ext JS.

Installation and environment setup

In five easy steps, you can be ready with Ext JS and start the development.

Step 1 – What do you need?

You need the following components for the installation and environment setup:

  • Web browser : Any of the leading browsers mentioned in previous section. For this book, we will consider Mozilla Firebug with the Firebug debugger plugin installed.
  • Web server : To start with, a local web server is not required, but it will be required if communication with a server is required to make AJAX calls.
  • Ext JS 4 SDK : Download the Ext JS bundle from http://www.sencha.com/products/extjs/download/.

Click on the Download button on the left side of the page.

Step 2 – Installing the browser and debugger

Any supported browser mentioned in the previous section can be used for the tutorial. For simplicity and debugging options, we will use the latest Firefox and Firebug debugger plugin. Download the latest Firefox plugin from http://www.mozilla.org/en-US/firefox/fx/#desktop and Firebug from https://getfirebug.com/.

Other browser debugging options are as follows:

  • Google Chrome : Chrome Developer Tools ( Tools | Developer tools )
  • Safari : Go to Settings | Preferences | Advanced , select Show Develop menu in menu bar ; navigate to Develop | Show Web Inspector .
  • Internet Explorer : Go to Tools | Developer Tools

 

Step 3 – Installing the web server

Install the web server and unpack Ext JS.

The URLs that provide information for installing the Apache web server on various operating systems are provided as follows:

Install Apache or any other web server in your system. Browse to http://yourwebserver.com or http://localhost, and check that the installation is successful.

The http://yourwebserver.com link will show something similar to the the following screenshot, which confirms that Apache is installed successfully:

Step 4 – Unpacking Ext JS

In this tutorial, we will use Apache for Windows. Unpack the Ext JS bundle into the web server's root directory (htdocs). Rename the Ext JS folder with long version numbers to extjs4 for simplicity. The root directory varies, depending upon your operating system and web server.

The Apache root directory path for various operating system are as follows:

  • Windows : C:\Program Files\Apache Software Foundation\Apache2.2\htdocs
  • Linux : /var/www/
  • Mac OS X : /Library/WebServer/Documents/

The downloaded EXT JS bundle is packed with examples along with required sources. Browse to http://yourwebserver.com/extjs4, and make sure that it loads the Ext JS index page. This page provides access to all the examples to play around with the API. The API Docs link at bottom-right of the page lists the API information with a search text field at the top-right side of the page. As we progress through the tutorial, please refer to the API as and when required:

Step 5 –Testing Ext JS library.

A basic Ext JS application page will have a link tag with an Ext JS CSS file (ext-all.css), a script tag for the Ext JS library, and scripts related to your own application. In this example, we don't have any application-specific JavaScripts.

Create an HTML file named check.html with the code that follows beneath the httpd folder.

Ext.onReady is a method, which is executed when all the scripts are fully loaded. Ext.Msg.alert is a message box that shows a message to the user. The first parameter is the title and the second parameter is the message:

<html> <head> <meta http-equiv="Content-Type" content = "text/html; charset=utf-8"> <title>Ext JS started Setup Test</title> <link rel="stylesheet" type="text/css"
href = "../extjs4/resources/css/ext-all.css"></link> <script type="text/javascript" src = "../extjs4/ext-all-dev.js"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.Msg.alert("Ext JS 4 Starter","Welcome to Ext 4 Starter!"); }); </script> </head> <body> </body> </html>

The following screenshot shows check.html in action:

And that's it

By now, you should have a working installation of Ext JS, and should be able to play around and discover more about it.

Summary

Thus we have discussed about having a working environment of EXT JS.

Resources for Article :


Further resources on this subject:


Instant Ext JS Starter [Instant] Find out what Ext JS actually is, what you can do with it, and why it's so great with this book and ebook
Published: April 2013
eBook Price: ₨387.00
See more
Select your format and quantity:

About the Author :


Nagarajan Bhava

Nagarajan Bhava is a User Interface Architect, who actively explores, designs, and develops user interfaces using the latest UI technologies. He has over 14 years of experience—12 years in IT and 2 years in Control system design engineering.

His work on user interfaces started during pre-Ajax days, for a Business Analytic product with thick-client and Windows desktop-like features in a thin web browser client interface and he is continuing his development for SaaS-based Cloud security service.

He primarily works on user interface designs, developing intuitive rich user interfaces using the latest User Interface frameworks (such as jQuery, MooTools, YUI, DOJO, and Ext JS), Ajax, JavaScript, HTML5, CSS, and Web 2.0 technologies, along with Java J2EE backend technologies.

He has recently taken an interest in designing user interfaces for mobile devices.

He is creative and loves to research various upcoming UI trends and implements them wherever applicable. He has a passion for UI design and is an artist by hobby.

Books From Packt


Ext JS 4 Plugin and Extension Development
Ext JS 4 Plugin and Extension Development

Ext JS 4 First Look
Ext JS 4 First Look

Learning Ext JS 3.2
Learning Ext JS 3.2

Ext JS 3.0 Cookbook
Ext JS 3.0 Cookbook

Learning Ext JS 4
Learning Ext JS 4

Learning Ext JS
Learning Ext JS

Mastering Ext JS
Mastering Ext JS

Ext JS 4 Web Application Development Cookbook
Ext JS 4 Web Application Development Cookbook


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software