Using Abstract class and Interface in ExtJS 4.x programming.

I was driven to think about how to implement Interface and Abstract class when I review a project using Ext JS as front GUI library. It is good to see they try to do OOP and design the GUI component as reusable.

However, I saw that there was no clear idea about Interface and Abstract class design in the code. I say this because I saw some empty function in parent classes. Obviously, the programmer of parent classes wish subclass programmer to implement those empty functions. But, I did not see any code there to force subclass programmer to implement the function. The way to solve this is very simple, we only need to add a throw statement in parent class.

Ext.define('jia.blog.ParentClass', {
    greeting : function(){
                  throw "Unimplemented method.";
               }
}

Ext.define('jia.blog.ChildClass', {
    extend: 'jia.blog.ParentClass',

    greeting : function(){
                  alert('I implemented a abstract method');
               }
}

About using Interface in Ext JS, I think the new feature mixins introduced in Ext JS 4.0 can be good candidate as it is invented to solve multiple inherent. In Java, we know that one class can only extends from one and only one parent class. But, it can implement multiple Interfaces. So, for my opinion, I will declare my interface as mixins as below,

//a mixins class to be used as Interface
Ext.define('jia.blog.TechnicalManager', {
    level : 'manager',
    meetingWithPM : function() {
        throw "unimplemented method";
    }
});

//a mixins class to be used as Interface
Ext.define('jia.blog.Mother', {
    sex : 'female',
    feedChild : function() {
        throw "unimplemented method";
    }
});

Ext.define('jia.blog.WorkingMom', {
    
    mixins: {
        inWork: 'jia.blog.TechnicalManager',
        atHome: 'jia.blog.Mother'
    }

    meetingWithPM : function() {
        alert('I am meeting with project manager');
    }

    feedChild : function() {
        alert('I am feeding my kids');
    }

});

Of course, you can put "abstract" method in mixins too. I did not do it here just because I want to show how I use mixins as Interface in OOP manner. Actually, Javascript has no class at all. Class here should be called as Ext JS class as Ext JS 4.0 create the infrastructure of Class and Object. extend and mixins are both preprocessors in ExtJS 4.0. I list default preprocessors and postprocessors as below.

• default preprocessors (defined in Class.js):
  'extend', 'statics', 'inheritableStatics', 'mixins', 'config'
  
• default postprocessors (defined in ClassManager.js):
  'alias', 'singleton', 'alternateClassName'
  

Although ExtJS tries to implement a Class infrastructure for OOP, it is not a sophisticated OOP environment after all. For example, the throw statement we used above does not really force subclass developer to implement methods. Subclass developer will not know until he run the code. This happens there is no something like ExtJS compiler or interpreter. But, we can apply certain OO design concept with it. Also, we need to be careful not to make same properties or function names in different preprocessors or postprocessors as, obviously, ExtJS class functions will deal with these processors in sequence.