ExtJS Object-oriented

Preface

1.ExtJs is a good set of background frameworks. It's very popular now, we're going to.

2. This is my first writing ExtJS, will later write a lot until the framework of the use of the perfection, the obsession.

namespaces in the ExtJS

I do. NET, the namespace name is the same, the function is the same, all the classes in the project to effectively manage the scope of the classification. Their hierarchies are all using "." To divide. It's just different when you define it. EXT is defined by the namespace () method. (I won't show you here, I'll use it in the example)

class definitions in JavaScript

1.JavaScript is a language based on the inheritance of the prototype chain, without the concept of a class. And the JavaScript language feature is loose and free, to achieve a similar function, there can be many ways, but if it is allowed to loose and free, it is difficult to maintain and reuse code.

2. Object-oriented programming is mostly class-based. However, let ExtJS realize the OOP mechanism, both the normative of object-oriented programming and the flexibility of JavaScript can be achieved. Not impossible, you must understand JS in the prototype.       

        //Suppose we define a person class, because JS does not have class concept person =function() {This.head = 1;This.legs = 2;This.sex= "or"; } Person.prototype ={say:function() {alert ("I ' m a person, I has" +This.head + "head and" +This.legs + "Lesgs."); }, run:function () {alert ("I Can fly, because I have" + this.head + "head" );} saysex:function () {alert (" I ' m a "+this.sex); } // Below is the var person = new person (); alert (person.head); // results: 1 Person.say (Person.head, Person.legs); // result: I ' m a person, I has 1 head and 2 lesgs. Person.run (  this.head); // result: I can fly, because I have 1 head    

prototype is a very important function in JS. Can dynamically add any new methods to the object. ExtJS is the realization of OOP based on prototype.

OOP in the ExtJS

Since it is an object-oriented design concept, then there will be, inheritance, polymorphism, encapsulation.

ExtJS is a background application framework packaged in JavaScript, so let's take a look at how ExtJS implements OOP.

1, the name space, Public,private.         

        //JS in the namespace, Public,private Ext.Namespace"Com.zlh"); Com.zlh.seeInfo =function () {//Private membersvar name ="Zhanglonghao";//Private method say = function () {alert ("I ' m Zhanglonghao."); }//Private Method Sayegg = function () {alert ("You were a bad egg!"); }//Common methodsReturn{//This can be accessed to say (), name//Total members Sayhello:function () {alert ( " Hellow everyone. Do you know   "); }, // Total members Run:function () {alert ( " I want to fly higher.  "24// There is no access to name, say (); var zlh = new               

2, JS implementation of class inheritance

  //Suppose we define a person class, because JS does not have class concept person =function() {This.head = 1;This.legs = 2;This.sex= "or"; } Person.prototype ={say:function() {alert ("I ' m a person, I has" +This.head + "head and" +This.legs + "Lesgs."); }, run:function() {alert ("I Can fly, because I have" +This.head + "Head"); }, Saysex:function () {alert ("I ' m a" +this// Below is the //var extend =  (P, c) {c.prototype = P.prototype;} man = function {var gc = new man (); Gc.saysex (this.sex);           

3, ExtJS implementation of class inheritance

  //JS in the namespace, Public,private ext.namespace ("Com.zlh"); Com.zlh.seeInfo =function() {//Private membersvar name = "Zhanglonghao";//Private method say =function () {alert ("I ' m Zhanglonghao.")); }//Private Method Sayegg =function () {alert ("You were a bad egg!")); }//Common methodsReturn{//This can be accessed to say (), name//Total members SayHello:function () {alert ("Hellow everyone. Do you know "+ name +"? "); },//Total members Run:function () {alert ("I want to fly higher.")); } }; }; Com.zlh.seeInfo.prototype.age = 24;//love subclass inherits from parent Seeinfo Ext.extend (Com.zlh.love, Com.zlh.seeInfo, {// New method loveyou: function () {alert ("You, My love!") ); }, // override method say: function  () {alert ("I love you!") ); } }); var EJC = new//// here is Undefind       

configuration (config) option

when initializing an object in ExtJS, a large amount of the Config parameter is used, and config is a JSON object, and for ExtJS a lot of Hummer credit.

Suppose there is a blog class that has two attributes for the title and author, and initializes the property through a constructor function.           

   function (title, author) {            this.title = title;            this.author =New Blog ("Extjs-oop", "Zhang Long Hao"), alert (blog.title+ ", the author of this blog post is:" +blog.author+ ". Thanks for reading. ");

We use JSON instead of the data from the above code.

  function (config) {            this.title = config.title;            this.author =New Blog ({title: "Extjs-oop", Author: "Zhang Long Hao"}); alert (blog.title+), the author of this blog post is: "+blog.author+". Thanks for reading. ");

Let's see how ExtJS is implemented.

   function (config) {            ext.apply (this,config);        }        New Blog ({title: "Extjs-oop", Author: "Zhang Long Hao"});        Alert (blog.title+), the author of this blog post is: "+blog.author+". Thanks for reading. ");

ExtJS defines the Apply method, which is to assign the members of the second parameter to the first parameter, so that the code is convenient to write, much easier.

ext.apply () and Ext.applyif ()

Above we have seen the function of apply (Obj,config), applyif (obj,config) function with the function of apply (OBJ,CONFIG), there are different.

Apply overrides the property value with the same name as the config and obj parameters and adds other attributes from config to obj.

Apply is to add a property in config to obj, but the original property value of the obj parameter is unchanged. (Take a look at the example.)

Apply (Obj,config);

function (config) {            this.title = "Extjs-oop";            Ext.apply (This,config);        }        // output: Extjs-oop, the author of this blog is: Zhang Long hao. Thank you for reading. Alert (blog.title+), the author of this blog post is: "+blog.author+". Thanks for reading. ");

Applyif (Obj,config);

        function (config) {            this.title = "Extjs-oop";            Ext.applyif (this// output: Extjs-oop, the author of this post is: Zhang Long hao. Thank you for reading. Alert (blog.title+), the author of this blog post is: "+blog.author+". Thanks for reading. ");

This blog is a learning ExtJS of some basic knowledge of popularization. It seems irrelevant to actually be important. I'm using a Extjs4.2. Article JS reference: Ext-all.js.

This article references: Li Zhanhong Teacher's "easy to fix ExtJS"

ExtJS Object-oriented