ExtJS Object-oriented programming (inheritance, rewriting)

    <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 traditional object-oriented programming in support of object-oriented programming than JavaScript, and provides methods for:        //Extend, Apply/applyif (attribute nesting), override, Namespaces/ns        //Define transport Class (parent class)         function Vehicle(){             This. x =0; This. y =0; } vehicle.prototype.move= function(dx,dy){             This. x + = DX; This. y + = dy; }//Car only travels in the horizontal way         function Car(){Car.prototype =NewVehicle (); Car.prototype.move = function(dx){                 This. x + = DX; }        }//Elevator only in the vertical direction         function elevator(){Elevator.prototype =NewVehicle (); Elevator.prototype.move = function(dy){                 This. y + = dy; }        }//Use object as setting parameter         function Vehicle(config){             This. x = config.x; This. y = config.y; } Vehicle.prototype.toString = function(){            return "point: ("+x+","+y+")"; } function Car(config){            //Clear scope is car instanceVehicle.prototype.constructor.call ( This, config); This. color = Config.color; }//Using the Extend function provided by ExtExt.extend (car,vehicle,{//Override Parent-class moveMove function(dx){                 This. x + = DX; },//Override ToString for parent classTostring: function(){                varstr ="Car is"+ This. x+"miles away from original position"; str + ="This car is"+ This. color;returnStr }        });varConfig = {x:TenY:0, Color:"White"};varCar =NewCar (config); Car.move ( Max); Console.info (Car.tostring ());//Ext.extend preserves the parent class with the same name as the subclass, ExtJS can directly produce the overridden subclass        ///Just define the parent class first, then define a variable and assign the Ext.extend returned subclass to the variable        varTaxi = Ext.extend (vehicle,{//Constructors can also be overriddenConstructor function(){Vehicle.prototype.constructor.call ( This, config); This. color = Config.color; },//Override Move MethodMove function(dx){                 This. x+=dx; },//Override ToString MethodTostring: function(){                varstr ="Taxi is"+ This. x+"miles away from original position"; str + ="This car is"+ This. color;returnStr }        });varTaxiconfig = {x:TenY:0, Color:"White"};varTaxi =NewTaxi (Taxiconfig); Taxi.move ( Max); Console.info (Taxi.tostring ());//Note:        //When defining subclasses, it is often necessary to rewrite some properties inherited from the parent class. When writing a view component, it is particularly easy to confuse whether the attribute is in the parent class or the subclass generally:        //1, if this attribute is defined in the parent class, the new value is used instead of the property value in the parent class        //2, if the parent does not define this property, it does not have to overwrite        ///3, when setting the parent class property, there is a default value for the secondary setting        //Above requirements can be met using Apply/applyif, as follows:        varCONFIG1 = {width: -, Height: $, Alpha:1};varConfig2 = {widht: -, Height:0.5, Alpha: -}; Console.debug ("before Ext.apply () config1 with [%d,%d] alpha:%f", Config1.width, Config1.height, Config1.alpha);//Regardless of whether CONFIG1 original attribute exists or not, rewrite it        The first parameter is the destination object, and the second argument is the source object        //Config2 property copy overrides CONFIG1 propertiesExt.apply (CONFIG1,CONFIG2); Console.debug ("after ext.apply () config1 with [%d,%d] alpha:%f", Config1.width, Config1.height, Config1.alpha, Config1.angle);//If you do not want to rewrite, you can use Applyif () instead, the parent class already has a given value and this value will not be overridden. But either apply or Applyif,config2 if it contains CONFIG1        ///non-existent attribute, this property is automatically copied to CONFIG1, Ext.apply also receives the third parameter, which is used as the default value        //component possible default values        varDefaults = {width: -, Alpha:1, Color:"White"};varConfig3 = {width: -, Height: $, Alpha:1};varCONFIG4 = {width: Max, Alpha:2, Angle: -}; 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, conf Ig3.color);The //Ext.override () method provides a way to override a method that has two parameters, one for the class to override, and another to override (encapsulated with object)         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 beautiful bus"; }, Nice:"Not a method can also be overridden"})varBus =NewBus ();        Console.info (Bus.move ());        Console.info (Bus.tostring ()); Console.info (Bus.nice);</script>

ExtJS Object-oriented programming (inheritance, rewriting)