7 min read

(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 FilesApache Software FoundationApache2.2htdocs
  • 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:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here