ExtJS Object-Oriented Programming (inheritance, rewriting), extjs Object-Oriented Programming

ExtJS Object-Oriented Programming (inheritance, rewriting), extjs Object-Oriented Programming

<Link rel = "stylesheet" type = "text/css" href = "<% = basePath %>/ext-3.4/resources/css/ext-all.css"> <script type = "text/ javascript "src =" <% = basePath %>/ext-3.4/adapter/ext/ext-base.js "> </script> <script type =" text/javascript "src =" <% = basePath %>/ext-3.4/ext-all.js "> </script> <script type =" text/javascript "> // ExtJS is closer to the traditional object-oriented programming in support of object-oriented programming than JavaScript, the following methods are provided: // extend, apply/applyif (attribute nesting), override, namespaces/ Ns // defines the Vehicle class (parent class) function Vehicle () {this. x = 0; this. y = 0;} Vehicle. prototype. move = function (dx, dy) {this. x + = dx; this. y + = dy;} // The Car is only driving in the horizontal mode function Car () {Car. prototype = new Vehicle (); Car. prototype. move = function (dx) {this. x + = dx ;}// the Elevator is only traveling in the vertical direction. function Elevator () {Elevator. prototype = new Vehicle (); Elevator. prototype. move = function (dy) {this. y + = dy ;}/// use an object as the set Parameter function Vehicle (config) {this. x = config. x; this. y = config. y;} Vehicle. prototype. toString = function () {return "Point :(" + x + "," + y + ")";} function Car (config) {// define scope as Car instance Vehicle. prototype. constructor. call (this, config); this. color = config. color;} // use the extend function Ext. extend (Car, Vehicle, {// override the parent class move: function (dx) {this. x + = dx ;}, // rewrite toString of the parent class: function () {var str = "Car is" + thi S. x + "miles away from original position"; str + = "this car is" + this. color; return str ;}}); var config = {x: 10, y: 0, color: "white"}; var car = new Car (config); car. move (150); console.info (car. toString (); // Ext. extend retains the attributes of the parent class with the same name as the subclass. ExtJS can directly generate the rewritten subclass // you only need to define the parent class first, then define a variable and convert Ext. the subclass returned by extend is assigned to this variable. var Taxi = Ext. extend (Vehicle, {// constructor can also be rewritten by constructor: function () {Vehicle. prototype. constructor. call (th Is, config); this. color = config. color;}, // rewrite the move method move: function (dx) {this. x + = dx ;}, // rewrite toString method toString: function () {var str = "Taxi is" + this. x + "miles away from original position"; str + = "this car is" + this. color; return str ;}}); var taxiConfig = {x: 10, y: 0, color: "white"}; var taxi = new Taxi (taxiConfig); taxi. move (150); console.info (taxi. toString (); // Note: // when defining a subclass, you must override attributes inherited from the parent class.. When writing a view component, it is especially easy to confuse whether the attribute is defined in the parent class or subclass: // 1. If the parent class defines this attribute, use a new value to replace the attribute value in the parent class. // 2. If the parent class does not define this attribute, do not overwrite it. 3. When setting the parent class attribute, you can use apply/applyif to meet the following requirements: var config1 = {width: 100, height: 200, alpha: 1 }; var config2 = {widht: 100, height: 0.5, alpha: 25}; console. debug ("before Ext. apply () config1 with [% d, % d] alpha: % f ", config1.width, config1.height, config1.alpha); // no matter whether the original attribute of Config1 exists, always override // The first parameter is the target object, and the second parameter is Source object // copy the config2 attribute to overwrite the config1 attribute Ext. apply (config1, config2); console. debug ("After Ext. apply () config1 with [% d, % d] alpha: % f ", config1.width, config1.height, config1.alpha, config1.angle); // you can use applyIf () instead of rewrite (), the parent class already has a set value, which will not be overwritten. However, whether apply or applyIf, if config2 contains a property that does not exist in config1 //, this property will be automatically copied to config1, Ext. apply also receives the third parameter, which is used as the default value. // The default value of the component var defaults = {width: 50, alpha: 1, color: "white "}; var config3 = {width: 100, height: 200, alpha: 1}; var config4 = {width: 150, alpha: 2, angle: 25}; console. debug ("before Ext. apply () config1 with [% d, % d] alpha: % f ", config3.width, config3.height, config3.alpha); Ext. apply (config3, config4, defaults); console. debug ("After Ext. apply () config1 with [% d, % d] alpha: % f ", config3.width, config3.height, config3.alpha, config3.angle, config3.color); // Ext. the override () method provides a way to override the method. It has two parameters: one is the class to be rewritten, and the other is the method to be overwritten (encapsulated with objects) function Bus () {} Bus. prototype. move = function () {return "Bus move";} Bus. prototype. toString = function () {return "this is a bus";} Ext. override (Bus, {move: function () {return "Bus move on road" ;}, toString: function () {return "this is a beauul ul bus" ;}, nice: "Not a method, you can also override"}) var bus = new Bus (); console.info (bus. move (); console.info (bus. toString (); console.info (bus. nice); </script>