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 .
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.
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.
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:
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.