Chapter 3:
EXT OOP
Basic
I,
Javascript
Class Definition
In JavaScript, you can create a constructor to define a class, and then extend the functions of the class through prototype. Suppose we define a crab class: crab = function () {This. legs = 10;} crab. prototype = {say: function () {alert ("I'm a crab, I have" + this. legs + "My nature") ;}}; // test var crab = new crab (); alert (crab. legs); crab. say (); prototype is a very important function of JavaScript. It can dynamically add any new methods to objects. Extjs is an OOP Mechanism Based on prototype.
Ii. Definition of extjs namespace A namespace is similar to a package in Java and is used to effectively manage classes in the project. The namespace hierarchy is divided. EXT creates a namespace using the namespace () method. Syntax: Ext. namespace ("namespace") Example: Ext. namespace ("com. Aptech ");
Iii. extjs OOP Creating classes in extjs is a little different from Javascript. We will use the encapsulated content instead of completely based on JavaScript syntax. Standing on the shoulders of giants is indeed a little cool. Therefore, it is necessary to have a deep understanding of JavaScript basics in the future. Believe me. We usually create new classes based on namespaces. According to Java design ideas, there will be encapsulation, inheritance, and
Polymorphism .
Extjs And
Extjs I have done a lot of basic work For OOP and it is very modeled. A class should have at least private and public members, and can be derived from subclasses, and can override the methods of the parent class. Let's take a look.
Extjs How to do it. Ext. namespace ("com. aptech "); COM. aptech. first = function () {// Private member var kiss = "People's Republic of China"; // Private method // public method return {// Public Member init: function () {alert ("init"); alert (kiss) ;}, // Public Member method: function () {alert ("method ");}};}; we have defined a class first, which is really a class without any business significance, just for convenience. First is located in the com. Aptech namespace. There is a private member kiss, and two methods Init () and method () are exposed to the outside (). In fact, all the Members defined between function and return are always private, while all the Members defined in ruturn are public. If you have a solid foundation of javascipt Code It is not hard to understand. We define an anonymous constructor. the variables in the function are local variables and cannot be accessed from outside. An object is returned, which is defined in JSON format, the methods defined in this object are naturally accessible. Javascipt itself does not support inheritance, but we can simulate it. Inheritance means that the Child class uses the existing member data as the parent class, and the professional point is "copying members". That is, you can copy member variables or member methods. We define the following method to complete this function: var extend = function (child, Father) {child. prototype = Father. prototype;} Now, we define a subclass of a crab-the crab will, the crab will become refined into a human, from the original 10 feet to 2 feet, but the dog will not be able to change its behavior, still rampant. Gencrab = function () {This. legs = 2 ;}; extend (gencrab, crab); var GC = new gencrab (); GC. say (); in this way, a new class is generated. However, there is a more elegant approach in extjs. We define a class second and inherit from first to see how extjs works. // Create a subclass COM. aptech. second = function () {COM. aptech. second. superclass. constructor. apply (this); // call the parent class constructor} // COM. aptech. the second subclass inherits from the parent class COM. aptech. firstext. extend (COM. aptech. second, Com. aptech. first, {// New Method fun: function (I) {return I * I;}, // method of rewriting: function () {alert ("Second :: method ")}); // test var second = new COM. aptech. second (); alert (second. fun (5); Second. method (); Haha, It's so elegant that you can not only add new methods, but also rewrite them. Parent class method (Voiceover: Isn't this a manifestation of polymorphism ?). All of this is done by Ext. Extend (). This method is a bit complicated, but its implementation principle is the same.
Iv. Configuration
(Config)
Option
In extjs, the config parameter is used in a lot during object initialization. Don't be afraid. It's just a JSON object. However, config has made a lot of contributions to extjs. Assume that a student class has two attributes: Name and gender. The constructor initializes the attributes: Student = function (name, sex) {This. name = Name; this. sex = sex;} // test var student = new student ("Li zanhong", "male"); alert ("name:" + student. name + "\ r \ n Gender:" + student. sex. What if we use a JSON object as the parameter of the constructor? Student = function (config) {This. name = config. name; this. sex = config. sex;} // test var student = new student ({name: "lizan red", sex: "male"}); alert ("name:" + student. name + "\ r \ n Gender:" + student. sex); hey, it turns out like nothing else. The trick of changing the Tang Dynasty without changing the changes cannot lie to us. However, wait, please wait. If there are too many class members, 10, 20, and one hundred members, isn't the assignment statement very complicated? You can think of this, but Jack is smarter. He thought about it early, so he had the following code: Student = function (config ){
Ext. Apply (this, config ); } // Test var student = new student ({name: "Li zanhong", sex: "male"}); alert ("name:" + student. name + "\ r \ n Gender:" + student. sex); Ext defines a method named apply (), which assigns the members of the second parameter to the first parameter. Now, no matter how many Members there are in the config.
V,
Ext. Apply ()
And
Ext. applyif ()
We know Ext. the application (OBJ, config) method has another applyif (OBJ, config) method. It can be seen from the name that applyif () must meet certain conditions, which is really great, these complicated problems have not escaped your eyes. The difference between the two methods is described in advance, and then the example is used to explain: Apply will overwrite the attribute values of the same name of config and OBJ parameters, and add other attributes of config to OBJ; applyif does not overwrite the attributes with the same name as the config and OBJ parameters, but only adds other attributes of config to OBJ. That is to say, OBJ does not exist and all the properties in config will eventually be copied to OBJ. The difference is whether the same attribute value will be overwritten. The example illustrates all problems. Student = function (config) {This. Name = "Zhang haijun"; this. Sex = "male ";
Ext. Apply (this, config ); } // Test var student = new student ({name: "Li zanhong", sex: "male", birthday: new date ()}); alert ("Name: "+ student. name + "\ r \ n Gender:" + student. sex + "\ r \ n birthday:" + student. birthday); from the following results, we can see that both the property name and sex are overwritten, and a new member birthday is added. Name: Li zanhong Gender: boys' day: Fri may 01 2009 07:59:39 GMT + 0800 student = function (config) {This. name = "Zhang haijun"; this. sex = "male"; Ext. applyif (this, config);} // test var student = new student ({name: "Li zanhong", sex: "male", birthday: new date ()}); alert ("name:" + student. name + "\ r \ n Gender:" + student. sex + "\ r \ n birthday:" + student. birthday); Result: Name: Zhang haijun Gender: boys' day: Fri may 01 2009 08:02:33 GMT + 0800 ha, "Zhang haijun" was not replaced by "Li zanhong.
Vi. Summary
Having talked so much about Ext, is it a bit disappointing? However, I use my personality to guarantee that I am a good man. Students who know me must know me. The content of this chapter is the foundation of extjs, which we can understand Source code . If you see Jack's code, you think you are in the maze, or Jack deliberately wants to put us in the Cold palace.
Although it is the foundation, it is relative, because it is just a few lines of code that contains a wealth of design philosophy, a careful understanding, to know its taste.
