Sencha touch 2 system the class system (I)

Sencha touch 2 adopts the same class system as ext4.x ),Class System provides inheritance, dependency loading, Mixin, configuration options, etc.Javascript is a good way to implement Object-oriented thinking. 

1. Define a class

 Ext. define (' Car ' ,{  alias: ['widget.  Car  '], 
  
 config: { speed :   null   
}, constructor:   function   (config) {  This  . initconfig (config) ;}, run:   function   () {alert ( This. getspeed () ) ;}});  

Sencha touch defines the class using Ext. the define method; alias is the alias of the defined class. It can be seen that it is an array type, so multiple aliases can be defined; config is used to configure attributes, methods, and other members of the class; constructor is obviously a constructor. "This" indicates the current instance. The initconfig method initializes the configuration in config. Only the initconig method can be called to call the config definition member in other methods; run is a member method of the class. If you have never touched sencha touch 2 or ext4.x, you may wonder where the getspeed method is defined? In the config attribute configuration framework of sencha touch 2 and ext4.x, the corresponding getter method is automatically generated. The getspeed method is generated relative to the name, and the setter and applier methods are also generated. The following describes in detail.

 

2. instantiation

 
VaRBaoMa = ext. Create ('car', {Speed :'100 Mbit/H'
}); BaoMa. Run ();

VaRBens = ext.Widget('Car',{
Speed:'120m/H'
});
Bens. Run ();
 

The first instantiation is to use Ext. create method, the first parameter is the class name, must be the full name, the second parameter is the configuration option of the class, of course, must be defined when the class, the constructor with parameters, if no logarithm, this simple principle is believed to be clear, and the initconig method is called in the constructor, as mentioned above. If the name attribute is placed outside the config when the class is defined, the speed value of the class is not modified even if the name value is passed in during instantiation, the framework does not automatically generate the getspeed, setspeed, and applyspeed methods. The attributes placed in the config file are the members with the public keyword added to the C # file, members placed out of config Add the protected keyword to C.

The second type of Instantiation is the Ext. widget method. The first parameter must be the alias of the class.

 

3. Inheritance

 
Ext. Define ('Taxi', {Extend:'Car', Run:Function() {Alert ('the speed is '+This. Getspeed ());}});
 

Extend is the key word of class inheritance. If you want to override the class member, you can simply re-define it, such as the run method above.

 

4. The framework automatically adds the following methods for each configuration item:

1) A getter method-for example, getspeed is the current value of speed.

2) a setter method-for example, getspeed is to set a new value for speed.

3) an applier method, such as applyspeed, is automatically called when the configuration changes.

 
Ext. Define ('Taxi', {Extend:'Car', Applyspeed:Function(Newspeed, oldspeed ){ReturnConfirm ('Are you sure you want to change speed to '+ newspeed + '? ')?Newspeed: oldspeed ;}})
 

VaRBens = ext. Create ('Taxi', {Speed:'120m/H'}); Bob. setspeed ('200m/H ');//Automatically call the applyspeed method. The confirm dialog box is displayed. Select No.Bob. Run ();//Still display '200m/H'
 

Getter and setter are obviously the methods for obtaining values and assigning values. Here we will not talk about them much. The applier method will take applyspeed as an example. When the value of speed is modified, the applyspeed method is called. The automatically generated applyspeed method by the Framework simply returns the modified value. Therefore, you can override the applyspeed method when defining the class, add the corresponding operation and return the processed value.