Ext.data.JsonP.getting_started({
- "guide": "<h1>I. Introduction</h1>\n\n<hr />\n\n<p>Ext JS 4 is by far the biggest overhaul we’ve ever made to <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> 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.</p>\n\n<p>With <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> 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 <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> 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 <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS way.”</p>\n\n<iframe src=\"http://player.vimeo.com/video/17666102?byline=0&portrait=0\" width=\"500\" height=\"281\" frameborder=\"0\"></iframe>\n\n\n\n\n<iframe src=\"http://player.vimeo.com/video/17733892?byline=0&portrait=0\" width=\"500\" height=\"281\" frameborder=\"0\"></iframe>\n\n\n<h1>II. Getting Started</h1>\n\n<hr />\n\n<h2>1. Requirements</h2>\n\n<h3>1.1 Web Browsers</h3>\n\n<p>Ext JS 4 supports almost any known web browsers, from Internet Explorer 6 to Chrome 11. During development, we recommend that you choose one of the following as the primary browsers for the best debugging experience:</p>\n\n<ul>\n<li><a href=\"http://www.google.com/chrome/intl/en/landing_chrome_mac.html?hl=en\">Google Chrome</a> 10+</li>\n<li><a href=\"http://www.apple.com/safari/download/\">Apple Safari</a> 5+</li>\n<li><a href=\"http://www.mozilla.com/en-US/firefox/new/?from=getfirefox\">Mozilla Firefox</a> 4+</li>\n</ul>\n\n\n<h3>1.2 Debugging Tools</h3>\n\n<p>Please refer to the dedicated <a href=\"#\">Debugging Handbook</a> guide on the recommended tools for each and every browser, as well as how to make use of them to aid development.</p>\n\n<h3>1.3 Web Server</h3>\n\n<p>Even though a local web server is not a requirement to use <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS 4, it is still highly recommended that you develop with one, since <a href=\"http://en.wikipedia.org/wiki/XHR\">XHR</a> over local <a href=\"http://en.wikipedia.org/wiki/File_URI_scheme\">file:// protocol</a> has <a href=\"http://en.wikipedia.org/wiki/Same_origin_policy\">cross origin restriction</a> on most browsers.</p>\n\n<h3>1.4. <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS 4 SDK</h3>\n\n<p>Download <a href=\"http://www.sencha.com/products/extjs/\">Ext JS 4 SDK</a> if you haven't done so. Unzip the package within your web root directory tree. This guide assumes that <code>http://localhost/ext-4.0</code> points to the top level directory of the downloaded SDK.</p>\n\n<p>Open <code>http://localhost/ext-4.0/index.html</code> on your web browser. If a welcome page appears, you are all set.</p>\n\n<h2>2. Application Structure</h2>\n\n<p>Although not being mandatory, all suggestions listed below should be considered as best-practice guidelines to keep your application well organized, extensible and maintainable.</p>\n\n<h3>2.1 Basic Structure</h3>\n\n<pre><code>- appname\n - app\n - namespace\n - Class1.js\n - Class2.js\n - ...\n - resources\n - css\n - images\n - ...\n - app.js\n - index.html\n</code></pre>\n\n<p>in which:</p>\n\n<ul>\n<li><code>appname</code> is a directory containing all your application's source files</li>\n<li><code>app</code> contains all your classes, the naming style of which should follow the convention listed in the <a href=\"class_system\">Class System</a> guide</li>\n<li><code>resources</code> 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.)</li>\n<li><code>index.html</code> is the entry-point HTML document</li>\n<li><code>app.js</code> contains your own application's logic</li>\n</ul>\n\n\n<p>An <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS application is self-contained in a single HTML document, the content of which has this format:</p>\n\n<pre><code><html>\n<head>\n <title>Application Name</title>\n\n <link rel=\"stylesheet\" type=\"text/css\" href=\"path/to/sdk/resources/css/ext-all.css\">\n <script type=\"text/javascript\" src=\"path/to/sdk/ext-debug.js\"></script>\n <script type=\"text/javascript\" src=\"app.js\"></script>\n</head>\n<body></body>\n</html>\n</code></pre>\n\n<p>whereby:</p>\n\n<ul>\n<li><code>path/to/sdk</code> points to <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS 4 SDK directory in section <em>1.4</em></li>\n<li><code>path/to/sdk/resources/css/ext-all.css</code> contains all styling information needed for the whole framework</li>\n<li><code>path/to/sdk/ext(-debug).js</code> contains <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS 4 Core library (or <code>path/to/sdk/ext-all(-debug).js</code>, as explained below)</li>\n</ul>\n\n\n<p>From this point you need to choose between 2 different library inclusion methods. Each has its own pros and cons listed below:</p>\n\n<ol>\n<li><p>Include <code>path/to/sdk/ext-all.js</code> (<code>path/to/sdk/ext-all-debug.js</code> during development), which contains the whole framework.</p>\n\n<ul>\n<li>Pros:\n\n<ul>\n<li>There is no need to worry about dependencies when using default <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS components (but not your own custom classes)</li>\n</ul>\n</li>\n<li>Cons:\n\n<ul>\n<li>Deployment file size could be unnecessarily large if your application doesn't make use of everything the library has to offer. That, as a consequence, would lead to slower application initialization due to unnecessary script execution as well as network data transfer overheads.</li>\n<li>Debugging is difficult due to the fact that all source code is confined into one big file.</li>\n</ul>\n</li>\n</ul>\n</li>\n<li><p>Include <code>path/to/sdk/ext.js</code> (<code>path/to/sdk/ext-debug.js</code> during development) which contains just the minimum core library, and make use of <a href=\"../api/Ext.Loader\">Ext.Loader</a> for automatic dependencies resolution.</p>\n\n<ul>\n<li>Pros:\n\n<ul>\n<li>Your application only loads exactly what it needs as you develop. Deployed file size will be minimal.</li>\n<li>Debugging is simple and straight-forward since all source files are loaded separated. Errors messages come with the exact line numbers and file names from which they occur.</li>\n</ul>\n</li>\n<li>Cons:\n\n<ul>\n<li>Attention to dependencies when using default components shipped with the SDK is needed</li>\n</ul>\n</li>\n</ul>\n</li>\n</ol>\n\n\n<p>In summary, it is recommended that you should only use <code>ext-all(-debug).js</code> if you need to shorten the initial learning curve. Otherwise, <code>ext(-debug).js</code> is preferred in most cases for actual application development.</p>\n\n<p>Last but not least, <code>app.js</code> is the entry-point of your own application's logic. For a basic application, the typical format of which may look like this:</p>\n\n<pre><code>// Register namespaces and their corresponding paths to <a href=\"#/api/Ext.Loader\" rel=\"Ext.Loader\" class=\"docClass\">Ext.Loader</a>\nExt.Loader.setPath({\n 'AppName': 'app',\n ... // Other namespaces\n});\n\n// Specify a list of classes your application your application needs\nExt.require([\n ...\n]);\n\n// Application's initialization\nExt.onReady(function() {\n\n ...\n\n});\n</code></pre>\n\n<h3>2.2 MVC (Model-View-Controller) Structure</h3>\n\n<p>Ext JS 4 shipped with a robust MVC architecture which maximize extensibility and maintainability for medium to large scale applications. Please refer to the <a href=\"application_architecture\">MVC Application Architecture guide</a> for detailed instructions.</p>\n\n<h1>3. Deployment</h1>\n\n<p>The newly introduced Sencha SDK Tools (<a href=\"http://www.sencha.com/products/extjs/\">download here</a> ) makes deployment of any <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS 4 application easier than ever. The tools allows you to generate a manifest of all dependencies in the form of a JSB3 (JSBuilder file format) file, and create a minimal custom build of just what your application needs within minutes.</p>\n\n<p>Once you've installed the SDK Tools, open a terminal window and navigate into your application's directory.</p>\n\n<pre><code>cd path/to/application\n</code></pre>\n\n<p>From here you only need to run a couple of simple commands. The first one generates a JSB3 file:</p>\n\n<pre><code>sencha create jsb -a index.html -p app.jsb3\n</code></pre>\n\n<p>This scans your <code>index.html</code> file for all framework and application files that are actually used by the app, and then creates a JSB file called <code>app.jsb3</code>. Generating the JSB3 first gives us a chance to modify the generated <code>app.jsb3</code> 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:</p>\n\n<pre><code>sencha build -p app.jsb3 -d .\n</code></pre>\n\n<p>This takes the JSB3 file and creates an <code>app-all.js</code>, which is a minimized build of your application plus all of the <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS classes required to run it. It also creates an <code>all-classes.js</code> file, which has the same classes as <code>app-all.js</code>, but is not minified so is very useful for debugging problems with your built application. In short, <code>app-all.js</code> is the minified and production-ready version of <code>all-classes.js + app.js</code>.</p>\n\n<p>Most applications will need a separate <code>index.html</code> for the deployed version of the app, for example to add Analytics includes or other production-only logic into that file. Typically you would end up with a production <code>index.html</code> file that looks like this:</p>\n\n<pre><code><html>\n<head>\n <title>Application Name</title>\n\n <link rel=\"stylesheet\" type=\"text/css\" href=\"path/to/sdk/resources/css/ext-all.css\">\n <script type=\"text/javascript\" src=\"path/to/sdk/ext.js\"></script>\n <script type=\"text/javascript\" src=\"app-all.js\"></script>\n</head>\n<body></body>\n</html>\n</code></pre>\n\n<p>Notice that <code>path/to/sdk/ext-debug.js</code> has been replaced with <code>path/to/sdk/ext.js</code>, and <code>app.js</code> has been replaced with <code>app-all.js</code> in this production version, comparing with the development one described in section <em>2.1</em></p>\n\n<p>For applications built on top of a dynamic server-side language like PHP, Ruby, ASP, etc., you can simply replace <code>index.html</code> in the first command to the actual URL of your application. This URL should be the same with what is viewable on the browsers during development. For example:</p>\n\n<pre><code>sencha create jsb -a http://localhost/path/to/application/index.php -p app.jsb3\n</code></pre>\n\n<h2>This guide is a work in progress.</h2>\n\n<p>Please check back soon</p>\n"
+ "guide": "<h1>Getting Started with <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS 4.0</h1>\n\n<h2>I. Introduction</h2>\n\n<hr />\n\n<p>Ext JS 4 is by far the biggest overhaul we’ve ever made to <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> 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.</p>\n\n<p>With <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> 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 <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> 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 <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS way.”</p>\n\n<h2>II. Getting Started</h2>\n\n<hr />\n\n<h3>1. Requirements</h3>\n\n<h4>1.1 Web Browsers</h4>\n\n<p>Ext 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:</p>\n\n<ul>\n<li><a href=\"http://www.google.com/chrome/\">Google Chrome</a> 10+</li>\n<li><a href=\"http://www.apple.com/safari/download/\">Apple Safari</a> 5+</li>\n<li><a href=\"http://www.mozilla.com/en-US/firefox/fx/\">Mozilla Firefox</a> 4+ with the <a href=\"http://getfirebug.com/\">Firebug</a> Web Development Plugin</li>\n</ul>\n\n\n<p>This 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 <a href=\"http://code.google.com/chrome/devtools/docs/overview.html\">Chrome Developer Tools</a>.</p>\n\n<h4>1.2 Web Server</h4>\n\n<p>Even though a local web server is not a requirement to use <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS 4, it is still highly recommended that you develop with one, since <a href=\"http://en.wikipedia.org/wiki/XHR\">XHR</a> over local <a href=\"http://en.wikipedia.org/wiki/File_URI_scheme\">file:// protocol</a> has <a href=\"http://en.wikipedia.org/wiki/Same_origin_policy\">cross origin restriction</a> on most browsers.\nIf you don't already have a local web server it is recommended that you download and install Apache HTTP Server.</p>\n\n<ul>\n<li><a href=\"http://httpd.apache.org/docs/current/platform/windows.html\">Instructions for installing Apache on Windows</a></li>\n<li><a href=\"http://httpd.apache.org/docs/current/install.html\">Instructions for installing Apache on Linux</a></li>\n<li>Mac OS X comes with a build in apache installation which you can enable by navigating to \"System Preferences > Sharing\" and checking the box next to \"Web Sharing\".</li>\n</ul>\n\n\n<p>Once you have installed or enabled apache you can verify that Apache is running by navigating to <a href=\"http://localhost/\">localhost</a> in your browser. You should see a startup page indicating that Apache HTTP Server was installed successfully and is running.</p>\n\n<h4>1.3. <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS 4 SDK</h4>\n\n<p>Download <a href=\"http://www.sencha.com/products/extjs/\">Ext JS 4 SDK</a>. 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:</p>\n\n<ul>\n<li>Windows - \"C:\\Program Files\\Apache Software Foundation\\Apache2.2\\htdocs\"</li>\n<li>Linux - \"/var/www/\"</li>\n<li>Mac OS X - \"/Library/WebServer/Documents/\"</li>\n</ul>\n\n\n<p>Once you have finished installing Apache navigate to <a href=\"http://localhost/extjs/index.html\">http://localhost/extjs/index.html</a> in your browser. If an <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS 4 welcome page appears, you are all set.</p>\n\n<h3>2. Application Structure</h3>\n\n<h4>2.1 Basic Structure</h4>\n\n<p>Although 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 <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS application:</p>\n\n<pre><code>- 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\n</code></pre>\n\n<ul>\n<li><code>appname</code> is a directory that contains all your application's source files</li>\n<li><code>app</code> contains all your classes, the naming style of which should follow the convention listed in the <a href=\"#/guide/class_system\">Class System</a> guide</li>\n<li><code>extjs</code> contains the <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS 4 SDK files</li>\n<li><code>resources</code> 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.)</li>\n<li><code>index.html</code> is the entry-point HTML document</li>\n<li><code>app.js</code> contains your application's logic</li>\n</ul>\n\n\n<p>Don'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 <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS application up and running.\nTo do this we'll create a basic \"hello world\" <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS application called \"Hello Ext\". First, create the following directory and files in your web root directory.</p>\n\n<pre><code>- helloext\n - app.js\n - index.html\n</code></pre>\n\n<p>Then unzip the <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS 4 SDK to a directory named <code>extjs</code> in the <code>helloext</code> directory</p>\n\n<p>A typical <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS application is contained in a single HTML document - <code>index.html</code>. Open <code>index.html</code> and insert the following html code:</p>\n\n<pre><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>\n</code></pre>\n\n<ul>\n<li><code>extjs/resources/css/ext-all.css</code> contains all styling information needed for the whole framework</li>\n<li><code>extjs/ext-debug.js</code> contains a minimal set of <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS 4 Core library classes</li>\n<li><code>app.js</code> will contain your application code</li>\n</ul>\n\n\n<p>Now you're ready to write your application code. Open app.js and insert the following JavaScript code:</p>\n\n<pre><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 <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS.'\n }\n ]\n });\n }\n});\n</code></pre>\n\n<p>Now open your browser and navigate to <a href=\"http://localhost/helloext/index.html\">http://localhost/helloext/index.html</a>. You should see a panel with a title bar containing the text \"Hello Ext\" and the \"welcome\" message in the panel's body area.</p>\n\n<h4>2.2 Dynamic Loading</h4>\n\n<p>Open 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:</p>\n\n<p><img src=\"guides/getting_started/loader-warning-viewport.png\" alt=\"testing\" /></p>\n\n<p>Ext JS 4 comes with a system for dynamically loading only the JavaScript resources necessary to run your app.\nIn our example <code>Ext.create</code> creates an instance of <code>Ext.container.Viewport</code>. When <code>Ext.create</code> is called the loader will first check to see if <code>Ext.container.Viewport</code> has been defined.\nIf it is undefined the loader will try to load the JavaScript file that contains the code for <code>Ext.container.Viewport</code> before instantiating the viewport object. In our example the <code>Viewport.js</code> file gets loaded successfully, but the loader detects\nthat files are being loaded in a less-than optimal manner. Since we are loading the <code>Viewport.js</code> file only when an instance of <code>Ext.container.Viewport</code> 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.</p>\n\n<p>To fix this, we can add this one line of code above the call to <code>Ext.application</code>:</p>\n\n<p><code>Ext.require('Ext.container.Viewport');</code></p>\n\n<p>This will ensure that the file containing the code for <code>Ext.container.Viewport</code> is loaded before the application runs. You should no longer see the <code>Ext.Loader</code> warning when you refresh the page.</p>\n\n<h4>2.4 Library Inclusion methods</h4>\n\n<p>When you unzip the <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS 4 download, you will see the following files:</p>\n\n<ol>\n<li><p><code>ext-debug.js</code> - This file is only for use during development. It provides the minimum number of core <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS classes needed to get up and running. Any additional classes should be dynamically loaded as separate files as demonstrated above.</p></li>\n<li><p><code>ext.js</code> - same as <code>ext-debug.js</code> but minified for use in production. Meant to be used in combination with your application's <code>app-all.js</code> file. (see section <em>3</em>)</p></li>\n<li><p><code>ext-all-debug.js</code> - This file contains the entire <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS library. This can be helpful for shortening your initial learning curve, however <code>ext-debug.js</code> is preferred in most cases for actual application development.</p></li>\n<li><p><code>ext-all.js</code> - This is a minified version of <code>ext-all-debug.js</code> 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 <em>3</em>.</p></li>\n</ol>\n\n\n<h3>3. Deployment</h3>\n\n<p>The newly introduced Sencha SDK Tools (<a href=\"http://www.sencha.com/products/extjs/\">download here</a>) makes deployment of any <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> 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.</p>\n\n<p>Once you've installed the SDK Tools, open a terminal window and navigate into your application's directory.</p>\n\n<pre><code>cd path/to/web/root/helloext\n</code></pre>\n\n<p>From here you only need to run a couple of simple commands. The first one generates a JSB3 file:</p>\n\n<pre><code>sencha create jsb -a index.html -p app.jsb3\n</code></pre>\n\n<p>For applications built on top of a dynamic server-side language like PHP, Ruby, ASP, etc., you can simply replace <code>index.html</code> with the actual URL of your application:</p>\n\n<pre><code>sencha create jsb -a http://localhost/helloext/index.html -p app.jsb3\n</code></pre>\n\n<p>This scans your <code>index.html</code> file for all framework and application files that are actually used by the app, and then creates a JSB file called <code>app.jsb3</code>. Generating the JSB3 first gives us a chance to modify the generated <code>app.jsb3</code> 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:</p>\n\n<pre><code>sencha build -p app.jsb3 -d .\n</code></pre>\n\n<p>This creates 2 files based on the JSB3 file:</p>\n\n<ol>\n<li><p><code>all-classes.js</code> - 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.</p></li>\n<li><p><code>app-all.js</code> - This file is a minimized build of your application plus all of the <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS classes required to run it. It is the minified and production-ready version of <code>all-classes.js + app.js</code>.</p></li>\n</ol>\n\n\n<p>An <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS application will need a separate <code>index.html</code> 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 <code>helloext</code> directory called <code>index-prod.html</code>:</p>\n\n<pre><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-all.js\"></script>\n</head>\n<body></body>\n</html>\n</code></pre>\n\n<p>Notice that <code>ext-debug.js</code> has been replaced with <code>ext.js</code>, and <code>app.js</code> has been replaced with <code>app-all.js</code>. If you navigate to <a href=\"http://localhost/helloext/index-prod.html\">http://localhost/helloext/index-prod.html</a> in your browser, you should see the production version of the \"Hello Ext\" application.</p>\n\n<h3>4. Further Reading</h3>\n\n<ol>\n<li><a href=\"#/guide/class_system\">Class System</a></li>\n<li><a href=\"#/guide/application_architecture\">MVC Application Architecture</a></li>\n<li><a href=\"#/guide/layouts_and_containers\">Layouts and Containsers</a></li>\n<li><a href=\"#/guide/data\">Working with Data</a></li>\n</ol>\n\n"
});
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff