![\"testing\"](\"guides/getting_started/loader-warning-viewport.png\")
Ext JS 4 is by far the biggest overhaul weâve ever made to Ext JS, and constitutes the most advanced JavaScript framework ever created. Almost every area of the framework has been upgraded, from the generated HTML to the class system. Weâve unified APIs, added incredible new capabilities, and improved the performance of the entire framework.
\n\nWith Ext JS 4 weâve been driven by three key goals: speed, robustness and ease of use. We wanted the framework to be as fast and as robust as possible on every browser, and to be easy to learn and use. To achieve this we took the whole framework back to the drawing board, and what weâve come back with is the fastest, most bullet-proof version of Ext JS weâve ever created. Best of all, weâve managed to do it while staying true to the core experience of writing apps âthe Ext JS way.â
\n\nExt JS 4 supports almost any known web browsers, from Internet Explorer 6 to Chrome 11. During development, however, we recommend that you choose one of the following browsers for the best debugging experience:
\n\nThis tuturial assumes you are using Google Chrome 11. If you don't already have Chrome take a moment to install it, and familiarize yourself with the Chrome Developer Tools.
\n\nEven though a local web server is not a requirement to use Ext JS 4, it is still highly recommended that you develop with one, since XHR over local file:// protocol has cross origin restriction on most browsers.\nIf you don't already have a local web server it is recommended that you download and install Apache HTTP Server.
\n\nOnce you have installed or enabled apache you can verify that Apache is running by navigating to localhost in your browser. You should see a startup page indicating that Apache HTTP Server was installed successfully and is running.
\n\nDownload Ext JS 4 SDK. Unzip the package to a new directory called \"extjs\" within your web root directory. If you aren't sure where your web root directory is, consult the docs for your web server.\nYour web root directory may vary depending on your operating system, but if you are using Apache it is typically located at:
\n\nOnce you have finished installing Apache navigate to http://localhost/extjs/index.html in your browser. If an Ext JS 4 welcome page appears, you are all set.
\n\nAlthough not being mandatory, all suggestions listed below should be considered as best-practice guidelines to keep your application well organized, extensible and maintainable.\nThe following is the recommended directory structure for an Ext JS application:
\n\n- appname\n - app\n - namespace\n - Class1.js\n - Class2.js\n - ...\n - extjs\n - resources\n - css\n - images\n - ...\n - app.js\n - index.html\nappname is a directory that contains all your application's source filesapp contains all your classes, the naming style of which should follow the convention listed in the Class System guideextjs contains the Ext JS 4 SDK filesresources contains additional CSS and image files which are responsible for the look and feel of the application, as well as other static resources (XML, JSON, etc.)index.html is the entry-point HTML documentapp.js contains your application's logicDon't worry about creating all those directories at the moment. For now lets just focus on creating the minimum amount of code necessary to get an Ext JS application up and running.\nTo do this we'll create a basic \"hello world\" Ext JS application called \"Hello Ext\". First, create the following directory and files in your web root directory.
\n\n- helloext\n - app.js\n - index.html\nThen unzip the Ext JS 4 SDK to a directory named extjs in the helloext directory
A typical Ext JS application is contained in a single HTML document - index.html. Open index.html and insert the following html code:
<html>\n<head>\n <title>Hello Ext</title>\n\n <link rel=\"stylesheet\" type=\"text/css\" href=\"extjs/resources/css/ext-all.css\">\n <script type=\"text/javascript\" src=\"extjs/ext-debug.js\"></script>\n <script type=\"text/javascript\" src=\"app.js\"></script>\n</head>\n<body></body>\n</html>\nextjs/resources/css/ext-all.css contains all styling information needed for the whole frameworkextjs/ext-debug.js contains a minimal set of Ext JS 4 Core library classesapp.js will contain your application codeNow you're ready to write your application code. Open app.js and insert the following JavaScript code:
\n\nExt.application({\n name: 'HelloExt',\n launch: function() {\n Ext.create('Ext.container.Viewport', {\n layout: 'fit',\n items: [\n {\n title: 'Hello Ext',\n html : 'Hello! Welcome to Ext JS.'\n }\n ]\n });\n }\n});\nNow open your browser and navigate to http://localhost/helloext/index.html. You should see a panel with a title bar containing the text \"Hello Ext\" and the \"welcome\" message in the panel's body area.
\n\nOpen the Chrome Developer Tools and click on the Console option. Now refresh the Hello Ext application. You should see a warning in the console that looks like this:
\n\n
Ext JS 4 comes with a system for dynamically loading only the JavaScript resources necessary to run your app.\nIn our example Ext.create creates an instance of Ext.container.Viewport. When Ext.create is called the loader will first check to see if Ext.container.Viewport has been defined.\nIf it is undefined the loader will try to load the JavaScript file that contains the code for Ext.container.Viewport before instantiating the viewport object. In our example the Viewport.js file gets loaded successfully, but the loader detects\nthat files are being loaded in a less-than optimal manner. Since we are loading the Viewport.js file only when an instance of Ext.container.Viewport is requested, execution of the code is stopped until that file has been loaded successfully, causing a short delay.\nThis delay would be compounded if we had several calls to Ext.create, because the application would wait for each file to load before requesting the next one.
To fix this, we can add this one line of code above the call to Ext.application:
Ext.require('Ext.container.Viewport');
This will ensure that the file containing the code for Ext.container.Viewport is loaded before the application runs. You should no longer see the Ext.Loader warning when you refresh the page.
When you unzip the Ext JS 4 download, you will see the following files:
\n\next-debug.js - This file is only for use during development. It provides the minimum number of core Ext JS classes needed to get up and running. Any additional classes should be dynamically loaded as separate files as demonstrated above.
ext.js - same as ext-debug.js but minified for use in production. Meant to be used in combination with your application's app-all.js file. (see section 3)
ext-all-debug.js - This file contains the entire Ext JS library. This can be helpful for shortening your initial learning curve, however ext-debug.js is preferred in most cases for actual application development.
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 as described in section 3.
The newly introduced Sencha SDK Tools (download here) makes deployment of any Ext JS 4 application easier than ever. The tools allow you to generate a manifest of all JavaScript dependencies in the form of a JSB3 (JSBuilder file format) file, and create a custom build containing only the code that your application needs.
\n\nOnce you've installed the SDK Tools, open a terminal window and navigate into your application's directory.
\n\ncd path/to/web/root/helloext\nFrom here you only need to run a couple of simple commands. The first one generates a JSB3 file:
\n\nsencha create jsb -a index.html -p app.jsb3\nFor applications built on top of a dynamic server-side language like PHP, Ruby, ASP, etc., you can simply replace index.html with the actual URL of your application:
sencha create jsb -a http://localhost/helloext/index.html -p app.jsb3\nThis scans your index.html file for all framework and application files that are actually used by the app, and then creates a JSB file called app.jsb3. Generating the JSB3 first gives us a chance to modify the generated app.jsb3 before building - this can be helpful if you have custom resources to copy, but in most cases we can immediately proceed to build the application with the second command:
sencha build -p app.jsb3 -d .\nThis creates 2 files based on the JSB3 file:
\n\nall-classes.js - This file contains all of your application's classes. It is not minified so is very useful for debugging problems with your built application. In our example this file is empty because our \"Hello Ext\" application does not contain any classes.
app-all.js - This file is a minimized build of your application plus all of the Ext JS classes required to run it. It is the minified and production-ready version of all-classes.js + app.js.
An Ext JS application will need a separate index.html for the production version of the app. You will typically handle this in your build process or server side logic, but for now let's just create a new file in the helloext directory called index-prod.html:
<html>\n<head>\n <title>Hello Ext</title>\n\n <link rel=\"stylesheet\" type=\"text/css\" href=\"extjs/resources/css/ext-all.css\">\n <script type=\"text/javascript\" src=\"extjs/ext-debug.js\"></script>\n <script type=\"text/javascript\" src=\"app-all.js\"></script>\n</head>\n<body></body>\n</html>\nNotice that ext-debug.js has been replaced with ext.js, and app.js has been replaced with app-all.js. If you navigate to http://localhost/helloext/index-prod.html in your browser, you should see the production version of the \"Hello Ext\" application.
Ext JS 4 supports all major web browsers, from Internet Explorer 6 to the latest version of Google Chrome. During development, however, we recommend that you choose one of the following browsers for the best debugging experience:
\n\nThis tutorial assumes you are using the latest version of Google Chrome. If you don't already have Chrome take a moment to install it, and familiarize yourself with the Chrome Developer Tools.
\n\nEven though a local web server is not a requirement to use Ext JS 4, it is still highly recommended that you develop with one, since XHR over local file:// protocol has cross origin restriction on most browsers.\nIf you don't already have a local web server it is recommended that you download and install Apache HTTP Server.
\n\nOnce you have installed or enabled Apache you can verify that it is running by navigating to localhost in your browser. You should see a startup page indicating that Apache HTTP Server was installed successfully and is running.
\n\nDownload Ext JS 4 SDK. Unzip the package to a new directory called \"extjs\" within your web root directory. If you aren't sure where your web root directory is, consult the docs for your web server.\nYour web root directory may vary depending on your operating system, but if you are using Apache it is typically located at:
\n\nOnce you have finished installing Apache navigate to http://localhost/extjs/index.html in your browser. If an Ext JS 4 welcome page appears, you are all set.
\n\nAlthough not mandatory, all suggestions listed below should be considered as best-practice guidelines to keep your application well organized, extensible and maintainable.\nThe following is the recommended directory structure for an Ext JS application:
\n\n- appname\n - app\n - namespace\n - Class1.js\n - Class2.js\n - ...\n - extjs\n - resources\n - css\n - images\n - ...\n - app.js\n - index.html\nappname is a directory that contains all your application's source filesapp contains all your classes, the naming style of which should follow the convention listed in the Class System guideextjs contains the Ext JS 4 SDK filesresources contains additional CSS and image files which are responsible for the look and feel of the application, as well as other static resources (XML, JSON, etc.)index.html is the entry-point HTML documentapp.js contains your application's logicDon't worry about creating all those directories at the moment. For now lets just focus on creating the minimum amount of code necessary to get an Ext JS application up and running.\nTo do this we'll create a basic \"hello world\" Ext JS application called \"Hello Ext\". First, create the following directory and files in your web root directory.
\n\n- helloext\n - app.js\n - index.html\nThen unzip the Ext JS 4 SDK to a directory named extjs in the helloext directory
A typical Ext JS application is contained in a single HTML document - index.html. Open index.html and insert the following html code:
<html>\n<head>\n <title>Hello Ext</title>\n\n <link rel=\"stylesheet\" type=\"text/css\" href=\"extjs/resources/css/ext-all.css\">\n <script type=\"text/javascript\" src=\"extjs/ext-debug.js\"></script>\n <script type=\"text/javascript\" src=\"app.js\"></script>\n</head>\n<body></body>\n</html>\nextjs/resources/css/ext-all.css contains all styling information needed for the whole frameworkextjs/ext-debug.js contains a minimal set of Ext JS 4 Core library classesapp.js will contain your application codeNow you're ready to write your application code. Open app.js and insert the following JavaScript code:
Ext.application({\n name: 'HelloExt',\n launch: function() {\n Ext.create('Ext.container.Viewport', {\n layout: 'fit',\n items: [\n {\n title: 'Hello Ext',\n html : 'Hello! Welcome to Ext JS.'\n }\n ]\n });\n }\n});\nNow open your browser and navigate to http://localhost/helloext/index.html. You should see a panel with a title bar containing the text \"Hello Ext\" and the \"welcome\" message in the panel's body area.
\n\nOpen the Chrome Developer Tools and click on the Console option. Now refresh the Hello Ext application. You should see a warning in the console that looks like this:
\n\n
Ext JS 4 comes with a system for dynamically loading only the JavaScript resources necessary to run your app.\nIn our example Ext.create creates an instance of Ext.container.Viewport. When Ext.create is called the loader will first check to see if Ext.container.Viewport has been defined.\nIf it is undefined the loader will try to load the JavaScript file that contains the code for Ext.container.Viewport before instantiating the viewport object. In our example the Viewport.js file gets loaded successfully, but the loader detects\nthat files are being loaded in a less-than optimal manner. Since we are loading the Viewport.js file only when an instance of Ext.container.Viewport is requested, execution of the code is stopped until that file has been loaded successfully, causing a short delay.\nThis delay would be compounded if we had several calls to Ext.create, because the application would wait for each file to load before requesting the next one.
To fix this, we can add this one line of code above the call to Ext.application:
Ext.require('Ext.container.Viewport');
This will ensure that the file containing the code for Ext.container.Viewport is loaded before the application runs. You should no longer see the Ext.Loader warning when you refresh the page.
When you unzip the Ext JS 4 download, you will see the following files:
\n\next-debug.js - This file is only for use during development. It provides the minimum number of core Ext JS classes needed to get up and running. Any additional classes should be dynamically loaded as separate files as demonstrated above.
ext.js - same as ext-debug.js but minified for use in production. Meant to be used in combination with your application's app-all.js file. (see section 3)
ext-all-debug.js - This file contains the entire Ext JS library. This can be helpful for shortening your initial learning curve, however ext-debug.js is preferred in most cases for actual application development.
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 as described in section 3.
The newly-introduced Sencha SDK Tools (download here) makes deployment of any Ext JS 4 application easier than ever. The tools allow you to generate a manifest of all JavaScript dependencies in the form of a JSB3 (JSBuilder file format) file, and create a custom build containing only the code that your application needs.
\n\nOnce you've installed the SDK Tools, open a terminal window and navigate into your application's directory.
\n\ncd path/to/web/root/helloext\nFrom here you only need to run a couple of simple commands. The first one generates a JSB3 file:
\n\nsencha create jsb -a index.html -p app.jsb3\nFor applications built on top of a dynamic server-side language like PHP, Ruby, ASP, etc., you can simply replace index.html with the actual URL of your application:
sencha create jsb -a http://localhost/helloext/index.html -p app.jsb3\nThis scans your index.html file for all framework and application files that are actually used by the app, and then creates a JSB file called app.jsb3. Generating the JSB3 first gives us a chance to modify the generated app.jsb3 before building - this can be helpful if you have custom resources to copy, but in most cases we can immediately proceed to build the application with the second command:
sencha build -p app.jsb3 -d .\nThis creates 2 files based on the JSB3 file:
\n\nall-classes.js - This file contains all of your application's classes. It is not minified so is very useful for debugging problems with your built application. In our example this file is empty because our \"Hello Ext\" application does not contain any classes.
app-all.js - This file is a minimized build of your application plus all of the Ext JS classes required to run it. It is the minified and production-ready version of all-classes.js + app.js.
An Ext JS application will need a separate index.html for the production version of the app. You will typically handle this in your build process or server side logic, but for now let's just create a new file in the helloext directory called index-prod.html:
<html>\n<head>\n <title>Hello Ext</title>\n\n <link rel=\"stylesheet\" type=\"text/css\" href=\"extjs/resources/css/ext-all.css\">\n <script type=\"text/javascript\" src=\"extjs/ext.js\"></script>\n <script type=\"text/javascript\" src=\"app-all.js\"></script>\n</head>\n<body></body>\n</html>\nNotice that ext-debug.js has been replaced with ext.js, and app.js has been replaced with app-all.js. If you navigate to http://localhost/helloext/index-prod.html in your browser, you should see the production version of the \"Hello Ext\" application.