8 inheritance and event basics of extjs learning notes

The interface here means that the observable actually acts as an abstract class. A large number of components in extjs are inherited from this class. This class provides some basic methods, such as addevents, addlistener, and fireevent.

This article does not introduce how to use extjs components to respond to events, but introduces some implementation principles of extjs events. The entire extjs framework is developed in an object-oriented manner, so it is also important to understand inheritance in JavaScript. My previous articleArticleComplementing: classes and closures in JavaScript are also prepared for this article. In addition, there is a well-written series of JavaScript inheritance in the blog, which is mainly written based on two articles by Douglas crockford. In fact, the principle of inheritance is almost the same. For details, refer.

Extjs implements inherited functions as a core function Ext. the extend and extend methods have two reconstruction versions. The first one accepts two parameters, the first one is extend (function superclass, object overrides), and the second one is extend (function subclass, function superclass, object overrides): function. The second version is based on subclass. Superclass is the constructor of the superclass, and overrides is an object. The attribute inside is to overwrite the attribute of the parent class. Inherits all methods in the prototype of the parent class of the Child class. In addition, the subclass can override the parent class method (override). Furthermore, each object of the subclass can also overwrite the parent class method. In fact, I think this function has no effect. The prototype modification effect is equivalent. Of course, the purpose of extjs is to completely block the magic of prototype. Program Attackers can process JavaScript like other languages. Of course, even so, its inheritance and general inheritance are still somewhat different. Let's take a look at the example below to prepare a person class. CopyCode The Code is as follows: person = function (name ){
This. Name = Name;
This. fn = function () {alert ('I am a person ')};
}
Person. Prototype. Print = function () {alert ('I am a person ');}
Person. Prototype. showage = function () {alert ('I am older than 0 ');}
Person. Prototype. showname = function () {alert ('show name: '+ this. Name )};
VaR per = new person ('Tom ');
Per. showname (); subclass: Student = function (ID ){
This. ID = ID;
}
Student. Prototype. showid = function () {alert (this. ID) ;}// subclass Method

Inheritance:
Ext. Extend (student, person );
Stu. showname ();!! No results! Stu does not have the name definition Stu. FN ();!! No result Stu. showid ();!!! There is still no result so far we have found some differences: the content in the constructor of the parent class will not be inherited, the constructor of the parent class will not be called, and the subclass (prototype) existing methods will also be lost! Next, replace the code below Ext. Extend:Copy codeThe Code is as follows: var Stu = new student ('01 ');
Student. Override ({print: function () {alert ('I am a student ');}});
Stu. Override ({print: function () {alert ('I am a bad student, but I won \'t affect others ');}});
Stu. Print ();
Stu. showage ();
VaR stu2 = new student ();
Stu2.print ();

All functions can be output as expected. showage is the method of the execution parent class, Stu. print is the executed Stu. the method specified in override, while stu2 executes student. the method specified in override. Here, we can probably guess how extend is implemented. The real Source Code is located in ext. in JS, the code and comments are as follows: Extend: function () { copy Code the code is as follows: // inline overrides
var IO = function (o) {// note this of this method. I don't know what this is. The IO will be assigned to the systolic. override, that is, prototype of the subclass
for (VAR m in O) {// so that the override of each subclass object directs to this method. If the subclass object calls override, this is the subclass object. That is,
This [m] = O [m]; // The effect shown by Stu. Override in the above example is only valid for the current object. It can be seen from this that override is not only a traditional coverage, but also can be used to add a new method
.
};
var OC = object. Prototype. constructor;

return function (SB, SP, overrides) {
If (ext. isobject (SP) {// checks the current version of the refactoring function. If SP is actually overrides, do some replacement work to make the actual meaning of the variable and the name match.
overrides = sp;
sp = Sb;
Sb = overrides. constructor! = OC? Overrides. constructor: function () {sp. Apply (this, arguments) ;}; // you cannot understand this ......
}< br> var F = function () {},
systolic,
spp = sp. Prototype;

F. prototype = spp; // F is a "clean" Copy of the parent class. The so-called "clean" means that it does not bring the attributes defined in the constructor of the parent class. // For example, person = function () // {This. privatefn = new function {some code goes here} // The privatefn is invisible to the subclass, therefore, the attributes defined by this in the constructor are equivalent to the private variables of the class.
systolic = sb. Prototype = new F (); // sets prototype of the subclass to prototype of the parent class, which is the core step of inheritance.. Constructor = Sb; // set the point of the correct constructor. For details about JavaScript inheritance, see
Sb. superclass = spp; // set the parent class
If (spp. constructor = OC) {// do not understand ......, Why is this used? Looking forward to guidance
spp. constructor = sp;
}< br> Sb. override = function (o) {// override method of the subclass. This override method is the override method of the function. It modifies prototype.
Ext. Override (SB, O); // see the end.
};
BMI. superclass = systolic. supr = (function () {// set the parent class of the prototype
return spp;
});
BMI. override = IO; // provides the override method for prototype of the subclass, so that a single object can be overwritten. It modifies the object. Note that it is different from the above Sb override.
Ext. override (SB, overrides); // rewrite
Sb. extend = function (o) {return Ext. extend (SB, O) ;}; // provides the extend Method for subclass to implement multi-inheritance
return sb; // returns the subclass.
};
}();

below is Ext. the override code is clear. Compared with the inline override, It is the modified prototype: override: copy Code the code is as follows: function (origclass, overrides) {
If (overrides) {
var P = origclass. prototype;
Ext. apply (p, overrides);
If (ext. isie & overrides. hasownproperty ('string') {// What is this? What's special about ie?
P. tostring = overrides. tostring;
}< BR >}

now we can officially introduce the extjs event model. Similar to events in other languages, you must first define events for a class. Events in other languages (such as C #) generally have a special event type, the event type can be viewed as a delegate array. Of course, the delegate is actually a function. Adding a time listener (listener) is to delegate an array to add a delegate (function ), the trigger event is to execute all the functions in the array. Javascript is similar, but JavaScript Functions are much more powerful and flexible than those in other languages, so no event type is required. Javascript events look like a string (it should also keep an array inside) and can be passed through the observale. add events using the addevents method, and use the observale. fireevent triggers an event through observale. addlistner adds an event listener. The following is an example that does not make any sense but illustrates the problem. copy Code the code is as follows: odder = function (Min, max) {
This. min = min;
This. max = max;
This. addevents ('onfindodd');
}< br> Ext. extend (odder, ext. util. observable, {run:
function () {
for (VAR I = This. min; I if (I % 2! = 0) {
This. fireevent ('onfindodd', I);
}< BR >});
var P = new odder (4, 8);
P. addlistener ('onfindodd', function (n) {alert (n) ;});
P. run ();

Odder is such a class. It passes in a range through a constructor, and then finds all the odd numbers in the range. Each time an odd number is found, an event is triggered. I add an event handler to it and return the odd alert it finds. Note that the parameters of the event handler can only be consistent with those of the programmer. It is not as strongly typed as the delegate.

Note: I have not used the example on the official website:Copy codeThe Code is as follows: Employee = ext. Extend (ext. util. observable ,{
Constructor: function (config ){
This. Name = config. Name;
This. addevents ({
"Fired": True,
"Quit": True
});

// Copy configured listeners into * This * object so that the base class's
// Constructor will add them.
This. Listeners = config. listeners;

// Call our superclass constructor to complete construction process.
Employee. superclass. constructor. Call (config)
}
}); This coshould then be used like this:
VaR newemployee = new employee ({
Name: employeename,
Listeners :{
Quit: function (){
// By default, "this" will be the object that fired the event.
Alert (this. Name + "has quit! ");
}
}
});

I think there are still articles in the examples on the official website. Its overload items include the constructor attribute, which makes it possible to overload the constructor of the parent class, then the subclass will call this constructor to create it. Actually, it does not change the Javascript behavior. This is related to the code I have not understood above. Next, we will discuss it again.