Ext JS 4.2.0 Sencha Docs

Sencha Compiler Reference

One of the major components new to Sencha Cmd with version 3 is the compiler. In a nutshell, the compiler is a JavaScript-to-JavaScript, framework-aware optimizer. It is designed to "understand" your high-level Ext JS and Sencha Touch code and produce the smallest, most efficient code possible to support these high-level abstractions.

Before using the compiler, you should understand the basics of Sencha Cmd by reading the following guides:

Sets And The Current Set


sencha compile -classpath=sdk/src,app ...





Note. With the compiler, you will often see rather long command lines using the command chaining mechanism and. Also, in practical use cases, for long command lines you should consider using Ant or a "response file". See Advanced Sencha Cmd. In this guide, all command lines will be complete (and potentially long) to keep the examples as clear as possible.

Generating Output with concat

A compiler ultimately is all about writing useful output given some number of inputs. The concat command is designed to concatenate the source for the current set of files in the appropriate dependency order.

The one required parameter is -out, which indicates the name of the output file. There are other options, however, that effect the generated file. You can pick one of the following options for compression:

  • -compress - Compress the generated file using the default compressor. Currently this is the same as -yui.
  • -max - Compress the generated file using all compressors and keep the smallest.
  • -closure - Compress the generated file using Google Closure Compiler.
  • -uglify - Compress the generated file using UglifyJS.
  • -yui - Compress the source file using YUI Compressor.
  • -strip - Strip comments from the output file, but preserve whitespace. This is the option used to convert "ext-all-debug-w-comments.js" into "ext-all-debug.js".

The following command illustrates how to produce three flavors of output given a single read of the source.

sencha compile -classpath=sdk/src \
    exclude -namespace Ext.chart and \
    -debug=true \
    concat -strip ext-all-nocharts-debug.js and \
    -debug=false \
    concat -yui ext-all-nocharts.js

Generating Metadata


Saving And Restoring Sets

When you need to produce multiple output files, it can be very helpful to save the current set for later use, which you do like this:

sencha compile -classpath=sdk/src \
    exclude -namespace Ext.chart and \
    save nocharts and \
    restore nocharts and \

Thesavecommand takes a snapshot of the current set and stores it under the given name (nocharts` in the above).

The simplest use of a saved set is the restore command. This does the reverse and restores the current set to its state at the time of the save.

Set Operations


A Little Set Theory

There are three classic set operations:




Set include and exclude


  • -class - Matches a specific defined type.



sencha compile -classpath=sdk/src \
    exclude -namespace Ext.chart and \


Negating include and exclude with -not


For example:

sencha compile -classpath=sdk/src,js \
    ... \
    exclude -not -namespace Ext and \

The above exclude command will exclude from the current set any classes that are not in the Ext namespace.

The all Set

In some cases, it is very handy to restore the current set to all files or to the empty set. To do this, you simply use include or exclude with the -all switch. To build on the previous example:

sencha compile -classpath=sdk/src \
    ... \
    include -all and \
    ... \
    exclude -all and \



As shown already, the include command is a form of set union: it performs a union of the current set with the set of matching files. Sometimes it is desirable to not include the current set in the union and only those file matching the desired criteria. This is what the union command does.


sencha compile -classpath=sdk/src ... and \
    union -namespace Ext.grid,Ext.chart and \


    exclude -all and \
    include -namespace Ext.grid,Ext.chart and \

Transitivity/Recursive Union


sencha compile -classpath=sdk/src,app \
    union -r -class MyApp.App and \


Intersect (Strict)


sencha compile -classpath=sdk/src,common,page1/src,page2/src \
    ... \
    intersect -set page1,page2 and \
    ... \

This command above intersects the two page sets and produces their intersection as the current set.

Intersect (Fuzzy)


For example,

sencha compile ... \


Compiler Directives


The list of directives is:

  • //@charset
  • //@tag
  • //@define
  • //@require

Character Encoding


//@charset ISO-9959-1





Consider the example:

//@tag foo,bar


Dealing with "Other" JavaScript Files



//@define Foo.bar.Thing
//@requires Bar.foo.Stuff

These directives set up the same basic metadata in the compiler that tracks what file defines a type and what types that file requires. In most ways, then, these directives accomplish the same thing as an Ext.define with a requires property.


Conditional Compilation

The compiler supports conditional compilation directives, such as the one illustrated here:

foo: function () {
    if (sometest) {
        Ext.log.warn("Something is wrong...");


This may be the most useful of the conditional directives, which you'd use for code that you want to run in a development environment but not in production.


The debug directive


For example, this command:

sencha compile -classpath=... \
    -debug \

generates code like this:

foo: function () {
    if (sometest) {
        Ext.log.warn("Something is wrong...");


However, this command:

sencha compile -classpath=... \
    -debug=false \

generates code like this:

foo: function () {


The if directive


For example:

//<if debug>

This is equivalent to the <debug> directive.