★ ★ ★ Installing Ext JS 4

Installing Ext JS 4

As many of you have heard, Sencha (the company behind the development of ExtJS) has released the version 4 of the ExtJS framework a couple of months ago, if you’ve been working with previous versions you will notice many differences; in this tutorial I will show you how to install the version 4 of ExtJS .

Bidding farewell to the adapter

For those who have been developing since the version 1 came out, we know that Ext JS was born as an extension of YUI, later on prototype, jQuery and base are introduced. To run the library with any of these four was necessary to import the adapter to serve as an “interpreter” between Ext and selected library (jQuery for example).

This has changed for the version 4, because is no longer necessary to import the adapter, in fact Ext is no longer an extension of any library and the developers of Sencha have decided to support only the Ext Core which is a library like jQuery or Prototype. This decision was taken so the Sencha Touch (which is the Mobile Library) could share code with ExtJS 4, besides several other advantages.

Welcome Ext Dev

When you download the version 4 you will find several files in the root directory, ext-all.js, ext-all-debug.js, ext-all-dev.js, ext.js, ext-dev.js

The file ext-all.js as in past versions contains all the library classes compressed and ready to go to the production environment.

In the ext-all-debug.js file the classes are uncompressed and is the file that we used in previous versions for the development environment.

In this version we find the ext-all-dev.js file, this file also contains the entire framework, but also contains error and warning messages that will be useful in the development phase, so from now on we should use it to develop.

We also find the files ext-dev.js and ext.js, these files are intended for when you do not need to load the entire library and just want to use a specific component, this means that these files only load the basic to be able to load dynamically only the classes that are required, we will discuss this later in detail.

Installation example

To install the library in a development environment is necessary to import the “ext-all-dev”, we also need to import the styles so the components can be displayed correctly. The HTML would be as follows:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Ext.Panel</title>
    <!-- Importing styles -->
    <link rel="stylesheet" type="text/css" href="../js/Ext/resources/css/ext-all.css" />

    <!-- Importing the ext-all-dev.js -->
    <script type="text/javascript" src="../js/Ext/ext-all-dev.js"></script>
    
    <script type="text/javascript" >
        Ext.onReady(function(){
            alert("Ext has been installed successfully!");
        });
    </script>
</head>
<body>
	<div id="center"></div>
</body>
</html>

Make sure to assign the routes of CSS and JS correctly, the folder structure in this example is as follows:

+ course
   + classes
      - 01-installation.html
   + js
      + Ext
         - ext-all-dev.js
         + resources
            + css
               - ext-all.css

If you run the example in the browser and you get an error “Ext is undefined”, it’s very likely that the path to the file “ext-all-dev.js” is incorrect, be sure to write correctly.

If you run the example but you don’t get any error and still can’t see the components, is possible that the CSS path is incorrect, make sure it is spelled correctly and it is the correct path.

Comments

7 Responses to Installing Ext JS 4

Apep December 20, 2011 at 11:40 am

Hello Crysfel, can you recomend me, what should i use version (ext.all or ext-all.js) for production. i know the version of ext.js for dynamic loading, but when i’m using ext.js the browser “not responding” at the moment.

Thanks,

Apep

Reply
- Crysfel December 20, 2011 at 4:32 pm
  
  Hi Apep.
  
  You should always use the ext-all.js in your production environment! you can use the ext.js in your development environment in order to debug your app easily.
  
  Regards
  
  Reply
- CoderNet April 22, 2012 at 12:40 pm
  
  这个很不错~·
  
  Reply
Apep December 21, 2011 at 4:18 am

Hi Crysfel,

Thanks for your responde,

if you said ext.js for development environment, what is differences ext.js and ext-debug.js ?

Thanks,

Apep

Reply
Mike February 8, 2012 at 2:23 pm

Hello Crysfel,

I am new to ExtJS and have been given a web app to fix(make 508 compliant), built with ExtJS 2.0.2. The ExtJS files the app uses are
ext-all.js, ext-all-debug.js and ext-base.js. Is it possible to migrate to ExtJS 4.0.7 from 2.0.2? Where do I start? Also would you recommed buying this book for a newbie like me?

Here is the link to the book.

http://www.amazon.com/Ext-JS-4-First-Look/dp/1849516669/ref=sr_1_1?s=books&ie=UTF8&qid=1328710661&sr=1-1

Thanks for your help.

Mike

Reply
paddy January 17, 2013 at 12:28 pm

Hello Crysfel,

I am new to ExtJS and using extJS3.2.1 i developed grid.now i want to migrate it to extJS4.0 can you please tell me how to do that.

Thanks,
Prasad

Reply
Rupam April 24, 2013 at 1:38 pm

In extjs 4.1.3 onwards

ext-all: minified, no JSDoc, no console warnings
ext-all-debug: non-minified, with JSDoc, no console warnings
ext-all-dev: non-minified, with JSDoc, with console warnings

ext-all and ext-all-debug are functionally equivalent, whereas ext-all-dev throws console warnings when you do things like use deprecated APIs or misconfigure components.

Reply

Bleext