EXTJS Object Oriented Design

Preface

One of the main goal of ExtJs framework is to build scalable applications. In order to do it effectively ExtJS enables to create,inherit classes and define namespaces. In this article we will see how to use these features in your programming design.

Namespace

When developing complicated projects,when defining the same functions or variable in various files, problems begins. In order to avoid it , ExtJs suggest to use namespaces. In order to use it,use following syntax Ext.ns("Customization"); The example of namespaces I will show you in class section

Classes

In order to create a class Extjs exposes Ext.define method. See example below


 Ext.ns("StockNs");
             Ext.define('StockNs.Instrument', {
                 name: 'Unknown',

                 constructor: function (name) {
                     if (name) {
                         this.name = name;
                     }
                     return this;
                 },

                 calc: function () {
                     alert('base calc');
                     return this;
                 }
             });

As you see first we defined a namespace. Which called "StockNs". Afterwords we created
a class called Instrument.  The constructor function called when class is created.
The class has one property named "name".

Inheritance

In order to implement inheritance, we need to use "extend" key word. See example below


         Ext.define('StockNs.Stock', {
                 extend: 'StockNs.Instrument',

                 calc: function () {
                     alert('stock calc');
                     this.superclass.calc();
                 }

             });

             var stock = Ext.create('StockNs.Stock', 'YAHOO');
             stock.calc();

We defined class Stock that inherited from Instrument class. Please notice that Stock class have the
same "Calc" method as the base class. In implementation of this function , we invoke the base "Calc"
method. We created Stock class and called to Calc method. If you will write it , you will see that
the method by default is overridden.

Summary

In this article we looked at the basic of EXTJs object oriented design.