Ext Extension with Factory Functions File Pattern

Code in this post can be obsolete, however, principles and theory may still apply.
See also:

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

    I’m sorry for this newb question but,

    // Do NOT put arrays or objects here

    in the default options?
    Is it relative to the extend method (this function is hard to read)?

  2. Andrés Serrón says

    Thanks saki, amazing work here.

    I would keep build function Private by using a clousure as overrides object.

    This way we could keep object api clean.

    Despite the little dom cleanup you get a more clean documentation doing this.

  3. says

    @Andrés, build function(s) are public on purpose. Developers can override them as they want.

    BTW, I’d be quite interested in your code with the private part…


  4. says

    about this, in every method that we access to the cofig object we could modify it, I think that´s a little dangerous and kind of messy because if we want we can modify the config object in every abstract method we override,

    maybe to prevent this we should do

    config.items = this.getItems();
    config.buttons = this.getButtons();
    config.tbar = this.getTbar();
    config.bbar = this.getBbar();

  5. Xam335 says

    Oh I see what you mean. Well this could be used for static content, specialy for a factory pattern.
    But ok, I didn’t get that this comment was this warning. thanks

  6. Andrés Serrón says

    Sorry for the delay, I forget about this post.

    The code I created comes from gathering some know how and doing some testing.

    The idea is the Ext.extend has either
    – Superclass, overrides
    – Constructor, superclass, overrides

    Either constructor or overrides could be a clousure with their own local variables.

    The only thing I couldn’t emulate properly is the static methods.

    “getCount” is visible in each instance, and should be visible in the object that holds the definition of the class.

    I will check Crockford words in this, but at first sight seems that the ext class flow and the prototype chain ways has a grey area in that issue.

    Back to the factory.
    The idea of building without mistake is clearly needed, my quote point to the fact that in each subclassing we add props and methods to the object, that’s a limitation of the current js implementation, and my quote was only in an attempt to clear the DOM a little.

    Here is the code.

    SampleClass = function(){

    // static
    var count = 0;

    return {

    getCount : function(){
    return count;

    // flaw: won\'t find privateValue as defined inside constructor.
    getPriv2 : function(){
    return privateValue;

    constructor: function(){


    // prop, setter, getter will work as they are in the same clousure.
    var privateValue = \'Mary\';

    this.getPriv = function(){
    return privateValue;

    this.setPriv = function(v){
    privateValue = v;



    SampleClass = Ext.extend(Ext.Panel,SampleClass());

    var t1 = new SampleClass();
    var t2 = new SampleClass();

    The example is purely academic, we have flaws here and we need to put those things to use.

We will be happy to hear back from you

Please Login to post a comment