Single File ExtJS 5 Application w/o Sencha Cmd

Published on: June 24, 2014

This is an archived post from the ExtJS era — the code may be obsolete, but the principles often still apply.

Sure, we have Sencha Cmd that takes from us the burden of creating application directory structure and initial files manually. Also, we can generate models, views, controllers with Cmd and we can compile the production version when we are done with the development. Nevertheless, I sometimes need to test something very fast, the simplest and most effective way possible. It used to be easy in previous versions: put together index.html, script tags with Ext and application, stylesheet and onReady function, and it was up and running. Would it be possible with Ext 5? And with Ext.app.Application support? Good News! It is still possible. Here is an example of single file Ext 5 application just to show that it is really possible to write it in one file. In real life I split it in two: index.html and app.js and I include app in index. The index is then reusable as you can include app.js, app-test.js, app-something.js so you still need to create just one javascript file. index.html:

index.html: single-page

#application#architecture#example#extjs#howtos#know-how#pattern#tutorials
Saki

Saki

I’m a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.

7 comments

  1. harry singhJune 26, 2014archive
    Hi Saki, I would like some direction from you about this issue. http://stackoverflow.com/questions/24396800/first-tab-panel-does-not-show-data-in-grid-ie-9 Thank you so much!! Harry
    1. SakiJune 26, 2014archive
      Not really related to the post, nevertheless, check my answer at stackoverflow.
  2. dmitry koutsenkoAugust 1, 2014archive
    How can I include sencha-charts.js to that example? I've run sencha package build in ../ext/packages/sencha-chart and placed reference to built sencha-charts-debug.js script after line 7. And just added 'Ext.draw.Container' into application requirements. Nothing works. I'm just trying to run drawing examples in ExtJS 5 - nothing renders to DOM-node and canvas, so I'm trying to localize trouble using your minimalistic app skeleton.
    1. dmitry koutsenkoAugust 1, 2014archive
      Hm... I included all charts sources directly, approx ~15 js files and included drawing examples instead your grid - still white window - nothing draws. Maybe ExtJS 5 GPL is broken now. Anyway, thanks.
      1. dmitry koutsenkoAugust 1, 2014archive
        My bug, app.json /** * The list of required packages (with optional versions; default is "latest"). * * For example, * * "requires": [ * "sencha-charts" * ] */ "requires": [ "ext-charts" ], Now that works. Not really related to the post, nevertheless, thanks.
    2. SakiAugust 4, 2014archive
      The problem here is that "package", in your case "sencha-charts" does not consist of only one javascript file but many. Usually in the application you don't need all of them, for example, you probably won't use all kinds of series in charts. Theoretically, you could go to "ext/packages/sencha-charts" directory and run "sencha package build" and then include resulting complete file, but I would not recommend this. Or, as you've already done, include individual files. It can be a tedious work to find which files to include and in which order but then it should work. Also, many packages come with styles (sourced in scss) that are also necessary. If we sum all of the above, using sencha cmd, generate apps, include packages, building, etc. is by far easiest way for anything bigger.
      1. dmitry koutsenkoAugust 12, 2014archive
        Thanks for the answer

Comments are closed on archived posts.