Introduction:
I have already provided a brief introduction in my previous post. So, here we are going to setup the ExtJS API and walk through a simple example of hello world.
Pre-requisites:
- A browser (IE/Firefox/Chrome/Safari). Preferably, Chrome and Firefox, b'coz it comes with easy debugging tools like Chrome Developer Tools and Firebug, respectively.
- A web-server (If or When you are working with backend data and AJAX)
- ExtJS API. You can download it from http://www.sencha.com/products/extjs/download
Typical Project Hierarchy:
A typical project with extjs looks like below:
Please note that when you unzip the downloaded file, you will the find all the js files upfront, which are kept here in extJSLibt. I have organized it in a separate folder, which is obviously for better management of code base.
Also, the resources folder comes as a part of framework, which contains the necessary CSS files, images and theme related files etc. So, its important to include this folder as well.
Understanding the major js files and their uses:
When you unzip the Ext JS 4 download, you will see the following files:
1. ext-debug.js - It provides the minimum number of core Ext JS classes needed to get up and running. This file is only for use during development. Any additional classes should be dynamically loaded as separate files using Ext.require:
For example, Ext.require('Ext.container.Viewport');
People who have worked with Dojo will be familiar with this approach.
2. ext.js - same as ext-debug.js but minified for use in production.
3. ext-all-debug.js - This file contains the entire ExtJS library. This can be helpful for shortening your initial learning curve, however ext-debug.js is preferred in most cases for actual application development.
This also helps you in debugging and resolving minor browser related issues or in case you want to do any changes in the default functioning of library. However, it is important to note, any changes you do should comply with the kind of license requirement/policy (http://www.sencha.com/products/extjs/license/) you have.
4. ext-all.js - This is a minified version of ext-all-debug.js that can be used in production environments. However, it is not recommended since most applications will not make use of all the classes that it contains.
Instead, it is recommended that you create a custom build for your production environment, will cover this in a different post sometime later.
5. bootstrap.js - This is the file which helps you to load the core js file (ext-all.js) depending upon the environment (local/dev/stage/prod) you are working on. Typically you won’t need it or need to change the code slightly as per your file names and need.
helloWorld.html:
<html>
<head>
<title> My Application </title>
<link rel="stylesheet" type="text/css" href="../extjs/ extJSLib/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/ extJSLib/ext-all-debug.js"></script>
<script type="text/javascript" src="../javascript/myApp.js"></script>
</head>
<body>
Home Page.
</body>
</html>
app.js:
Ext.onReady(function (){
sayHello();
});
function sayHello(){
Ext.Msg.alert('Hello World!!');
}
app.js explained:
Ext.onReady():
As per docs, Ext.onReady adds new listener to be executed when all required scripts are fully loaded. In other words, it is more like a function be executed on page laod.
Ext.Msg.alert():
As per docs, it displays a standard read-only message box with an OK button similar to the basic JavaScript alert prompt.
