Instant Ext JS Starter [Instant] — Save 50%
Find out what Ext JS actually is, what you can do with it, and why it's so great with this book and ebook
- Component model
- Plugin free charting
- CSS theming
(For more resources related to this topic, see here.)
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.
A simple webpage with a minimal UI too can make use of this framework in many ways.
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:
- The instructions for installing Apache on Windows can be found at http://httpd.apache.org/docs/current/platform/windows.html
- The instructions for installing Apache on Linux can be found at http://httpd.apache.org/docs/current/install.html
- Mac OS X comes with a built-in Apache installation, which you can enable by navigating to System Preferences | Sharing , and selecting the Web Sharing checkbox
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.
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"
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.
Thus we have discussed about having a working environment of EXT JS.
Resources for Article :
- Tips & Tricks for Ext JS 3.x [Article]
- Ext JS 4: Working with the Grid Component [Article]
- Building a Ext JS Theme into Oracle APEX [Article]
About the Author :
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 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.