Is there a standard design pattern for ExtJS

Question

We use ExtJS 3.x pretty heavily within our flagship application. Our application's admin area is split into the different modules that we offer. Each module, and subsequently each page for the different CRUD actions of the module have their own .js file to handle the functionality.

When we started, we were just throwing all of our code into Ext.onReady() and not really worrying about the global namespace (hey... we never really thought of ourselves as javascript developers). After getting the hang of ExtJS, I moved to using the singleton pattern and calling the init method from Ext.onReady() like so.

var newModule = {
    propertyOne: 'asfd',
    propertyTwo: 'asdf',
    init: function() {
        // set up
    }
};

Ext.onReady(function() {
    newModule.init();
});

Is this a correct use of the javascript singleton pattern and are there any patterns that fit ExtJS better than singleton, like say maybe the Module Pattern?

I've been using this guide as a starting point to learning design patterns in Javascript.

In case you have enough resources,you could upgrade to extjs 4 and Use their powerful MVC application to design your application and not to worry about namespaces. — Mehdi Fanai, Aug 24 '11 at 20:33
Unfortunately an upgrade is out of the question for now. We plan on upgrading as soon as we reach a stable version of our software. I can't wait to use the MVC pattern and the new Sass theming system. — Brandon Cordell, Aug 24 '11 at 22:37
Other details on using _a_ module design pattern for Ext JS 3.x can be found here: [ExtJS (JavaScript) Module Design Pattern best practices](http://stackoverflow.com/q/9104387/320399) — blong, Jul 25 '13 at 20:47

score 2 · Accepted Answer · answered Oct 04 '11 at 19:36

2

We eventually decided to upgrade to ExtJS and it seems with the new MVC architecture in place the best way to design your ExtJS software is using Ext.application()

You can read about it here.

answered Oct 04 '11 at 19:36

Brandon Cordell

1,308
1
9
24

score 1 · Answer 2 · answered Aug 25 '11 at 12:46

You can look here for example of creating own modules, file Module.js. We used this pattern for our own application and hadn't problem with it.

Ext.app.Module = function(config){
    Ext.apply(this, config);
    Ext.app.Module.superclass.constructor.call(this);
    this.init();
}

Ext.extend(Ext.app.Module, Ext.util.Observable, {
     init : Ext.emptyFn
});

Is there a standard design pattern for ExtJS

2 Answers2