In this article I’ll give a brief overview of the ExtJS a JavaScript framework, which is most popular today, due to the features and quality it offers. External Javascript or ExtJS as it is called, is a JavaScript framework that was initially designed to be an extension of the YUI framework (Yahoo! User Interface Library ) . It was named at the beginning of its development as yui-ext and YUI as its basis for work, so its operation was not possible without the use of YUI.
Its distribution is done through two licenses,
- a business license
- and other open-source license (open source)
Besides these two licenses, there is a support service that could be purchased individually, where the user acquires the right not only through the support forums, but also through e-mail, telephone, and if necessary, the user could purchase a higher membership level and also be entitled to support via onsite, having access to the SVN Ext JS, where he could find versions of Ext JS in development and yet-to be released versions.
The yui-ext, throughout its development, has been getting new adapters that serve to make the connection between it and other JavaScript frameworks such as Prototype and jQuery. The growth of its features and interface components that have brought value to the most popular JavaScript frameworks like YUI, jQuery and Prototype, made it quickly recognized by developers and contributors, generating greater speed to the emergence of several versions of the yui-ext 0.x., before finally being released as version 1.0, it got its name changed to ExtJS; showing that ExtJS is no longer just an extension to the YUI framework.
It came to be known as a framework after version 1.1 was released. Thereafter, new versions continued to be developed and with them came new functions and basic components redesigned to be more effective and required fewer lines of code.
Ext JS Browser Support
The ExtJS currently supports the most popular browsers like:
- IE 6 or higher.
- Firefox 1.5 or higher.
- Safari 3 or higher.
- Opera 9 or higher.
- Chrome.
Ext JS Installation and Setup
To use ExtJS, we first need to download the same through the following link: Donwload ExtJS. On this page we find two download options: a free version and the commercial version.
Figure 1: Download Page ExtJS
To download the free version, click on “Download fot Ext JS 4.0.7 GPL“. Save to a directory of your choice. After the download is complete, simply decompress the Zip file. The file that we downloaded, will give us the following folder structure:
Figure 2: Structure of the Ext JS folder
Working With Ext JS
To begin using this framework, we will create the file index.html. The directory structure of our code and the library will be as shown below:
Figure 3: Files needed to use Ext JS
Inside the of index.html file we will include the files needed to run the ExtJS i.e
- Ex-all.css: File containing all CSS styles of Ext JS.
- Ext-all.js: File that contains all the codes of the components, whether or not visible to users.
- Ext-base.js: This file can be used both as Ext JS to other libraries such as jQuery.
- We have included our script in the header.
Listing 1: Import the files needed
[code lang=”javascript”]
<!DOCTYPE html>
<html>
<head>
<title>TestIng of ExtJS</title>
<link rel="stylesheet" href="ext-4.0.7-gpl/resources/css/ext-all.css" type="text/css" />
<script src="ext-4.0.7-gpl/ext-all.js"></script>
<script language="javascript" type="text/javascript">
Ext.onReady(function(){
var win = new Ext.Window
({
height: 200,
width: 300,
title: ‘Test’,
html: ‘<b>Example of an application made with ExtJS</b>’
})
win.show();
Ext.get(‘btClose’).on(‘click’, function()
{
win.close();
})})
</script>
</head>
<body>
<input type="button" id="btClose" value="Close Window"></input>
</body>
</html>
[/code]
Let ‘s see the details of the preceding code:
- Within Ext.onReady we define a function as a parameter. This function is only loaded after all other elements of our application have been loaded, thus avoiding any problems that may occur. And it is in this function that we insert all the code we want to run when we open our page.
- Inside this function we begin by creating the variable “win” and called a window “ext.Window” with the dimensions 300px wide and 200px wide, and define a text to be displayed on this window.
- After the creation of this window through our variable “win”, we use the method “show”, which is displayed to the user. It will automatically be positioned exactly in the center of the browser screen.
- And finally we use “Ext.get ()”. We can compare this method with the familiar document.getElemetByID ().
Now that the code is ready, let’s test it. To do this, open the file “index.html” in your browser and we get the following result: a blue window in the middle of the browser and if we click on the close button, this window will be closed blue window, as shown in the following figure .
Figure 4: Results of the test example of ExtJS
However, as it is an object of Ext JS, we realize that with Ext.get the returned object has all the properties and methods of the object Ext.Element. And the property Ext.get (‘desiredElement’). Thus using the Ext.get can use events with ease. As we can see, in this case we associate an event to the button with id “btclose” using method “on“, which takes three parameters:
- Name of the event that we wish to associate;
- The call-back function that will be used when the event is triggered;
- And the scope, this is an optional parameter.
Hence we connect a function to the click event of the button that caught our variable which has the window and it executes the method “close” to close. If the result is not the same as shown in Figure 4, make sure your code is the same as shown above.
Summary
In this article we can conclude that ExtJS streamlines the development of web applications, with tools to develop attractive, efficient and mostly functional interfaces. That’s why it leaves ExtJS developer without concern for the visual part, which in most cases is not as important as the treatment of data. If you have any questions, write it in the comments section.
