Single File ExtJS 5 Application w/o Sencha Cmd

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

If you want to see the example code, login or sign-up. Free membership is available.
Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Pin on PinterestEmail this to someone
Follow me:


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

Latest posts by Saki (see all)


  1. dmitry koutsenko says

    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.

    • dmitry koutsenko says

      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.

      • dmitry koutsenko says

        My bug, app.json

        * The list of required packages (with optional versions; default is “latest”).
        * For example,
        * “requires”: [
        * “sencha-charts”
        * ]
        “requires”: [

        Now that works.
        Not really related to the post, nevertheless, thanks.

    • says

      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.

We will be happy to hear back from you

Please Login to post a comment