Extjs Coding Style


http://docs.sencha.com/ext-js/4-1/#!/guide/class_system - reading (scroll to "2. Configuration")

What are the basic naming conventions to follow?

  1. Class names may only contain alphanumeric characters. Numbers are permitted but are discouraged in most cases, unless they belong to a technical term. For example, MyCompany.util.Base64 is acceptable.
  2. Do not use underscores, hyphens, or any other nonalphanumeric character.
  3. Class names should be grouped into packages where appropriate and properly namespaced using object property dot-notation (.). At the minimum, there should be one unique top-level namespace followed by the class name. For example: MyCompany.data.CoolProxy, MyCompany.Application.
  4. The top-level namespaces and the actual class names should be in CamelCased, everything else should be all lower-cased. For example: MyCompany.form.action.AutoLoad
  5. Classes that are not distributed by Sencha should never use Ext as the top-level namespace.
  6. Acronyms should also follow CamelCased convention listed above. For example: MyCompany.parsers.HtmlParser instead of MyCompary.parsers.HTMLParser
  7. The names of the classes map directly to the file paths in which they are stored. As a result, there must only be one class per file. For example: MyCompany.chart.axis.Numeric is stored in path/to/src/MyCompany/chart/axis/Numeric.js, where path/to/src is the directory of your application's classes. All classes should stay under this common root and should be properly namespaced.
  8. Method and variable names may only contain alphanumeric characters. Numbers are permitted but are discouraged in most cases, unless they belong to a technical term. Do not use underscores, hyphens, or any other nonalphanumeric character.
  9. Method and variable names should always be in camelCased. This also applies to acronyms. For example: getHtml() instead of getHTML().
  10. Class property names follow the exact same convention with methods and variables mentioned above, except the case when they are static constants.
  11. Static class properties that are constants should be all upper-cased. Examples: Ext.MessageBox.YES, MyCompany.alien.Math.PI
  12. Use Ext.create instead of the traditional 'new' keyword because Ext.create allows you to take advantage of dynamic loading.

What is the old way of defining a class?

If you have ever used Ext JS prior to version 4, you may be familiar with Ext.extend to create a class:

var MyWindow = Ext.extend(Object, { ... });

This approach is easy to follow to create a new class that inherits from another. Other than direct inheritance, however, we didn't have a fluent API for other aspects of class creation, such as configuration, statics and mixins. Let's take a look at another example:

My.cool.Window = Ext.extend(Ext.Window, { ... });

In this example we want to namespace our new class, and make it extend from Ext.Window. There are two concerns we need to address:

  1. My.cool needs to be an existing object before we can assign Window as its property
  2. Ext.Window needs to exist / loaded on the page before it can be referenced

The first item is usually solved with Ext.namespace (aliased by Ext.ns). This method recursively transverse through the object / property tree and create them if they don't exist yet. The boring part is you need to remember adding them above Ext.extend all the time.

My.cool.Window = Ext.extend(Ext.Window, { ... });

The second issue, however, is not easy to address because Ext.Window might depend on many other classes that it directly / indirectly inherits from, and in turn, these dependencies might depend on other classes to exist. For that reason, applications written before Ext JS 4 usually include the whole library in the form of ext-all.js even though they might only need a small portion of the framework.

What is the new way of defining a class?

Ext.define(className, members, onClassCreated);
  1. className: The class name
  2. members: This is an JSON object representing a collection of class members (methods, variables) in key-value pairs
  3. onClassCreated: This is an optional callback function to be invoked when all dependencies of this class are ready, and the class itself is fully created. Due to the new asynchronous nature of class creation, this callback can be useful in many situations. See below.
Ext.define('My.sample.Person', {
    name: 'Unknown',
    constructor: function(name) {
        if (name) {
            this.name = name;

    eat: function(foodType) {
        alert(this.name + " is eating: " + foodType);

var aaron = Ext.create('My.sample.Person', 'Aaron');
aaron.eat("Salad"); // alert("Aaron is eating: Salad");

Note we created a new instance of My.sample.Person using the Ext.create() method. We could have used the new keyword (new My.sample.Person()). However it is recommended to get in the habit of always using Ext.create since it allows you to take advantage of dynamic loading.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License