ExtJS Tutorials (3)---the use of classes in ext

This chapter only introduces the basics of classes in Ext, and some advanced knowledge will be introduced in later chapters

Note: Because the upload is more troublesome, and the picture occupies a large space, so in the future if it is not particularly necessary in the article, will not be inserted many pictures, the final results of the implementation please self-verification.

1. Define a class

Use ext to define a class ext.define (' person ', {name: ' Jaune ', age:18});//Create a class var person = new Man (); Console.log (person);

We can see from the results that our defined properties are already present in the class. This is how the simplest class in Ext is defined

Note In the superclass, the class that we define with EXT does not indicate which class to inherit from, by default it inherits from Ext.base, which is equivalent to the object class in Java and is the base class of all EXT classes. How to inherit other classes is described below.

2, ext in the construction function

Ext.define (' person ', {name: ' Jaune ', age:18,constructor:function (config) {ext.apply (this,config);}}); /Create a class var man = new Person ({name: ' petty '}); Console.log (person);

The apply here is similar to apply in Chapter two, ext also has the Applyif function, the usage is similar to the Applyif in the second chapter, the Apply and APPLYIF functions in the second chapter are written in the following two functions of ext: If you are interested in viewing the source code, you can find the Ext.apply method in the help of Ext and click "View Source" to view its source code.

3. Inheritance of Classes

Use EXT to define a class ext.define (' person ', {name: ' Jaune ', age:18,constructor:function (config) {ext.apply (this,config);}}); /class inheritance Ext.define (' man ', {extend: ' person ', Sex: ' Male ', constructor:function (config) {//here is to ensure that the sex attribute in the created object is Male, If there is a sex attribute in config, delete this attribute if (config.hasownproperty (' sex ')) {delete config.sex;} /* * Callparent means calling a method with the same name as the parent class, which is used as the inheritance parent class constructor method * For example, there is a ToString method in the parent class, and the This.callparent () method is called in the ToString method of the subclass. The ToString method in the parent class is executed * This person can personally verify */this.callparent ([config]);},//This method is for easy printing tostring:function () {return {name: This.name,age:this.age,sex:this.sex};}); var man = new Man ({name: ' Tom ', Sex: ' Female '); Console.log (man.tostring ());/* * Print results as follows * Object {name: "Tom", Age:18, Sex: "Male"}  */

The man object is created by passing config to the constructor of the man class when the new object is passed, and then the man's constructor filters out the sex property and then calls the parent class's constructor to assign the property in config to the man object

4. Static properties and static methods for classes

/** * Statics can contain static and static methods of a class, but cannot inherit from a quilt class * inheritablestatics is similar to statics but can inherit */ext.define (' Dateutil ') from the quilt class, { Inheritablestatics:{currentdate:ext.date.format (New Date (), ' y-m-d '), Getcurrentdate:function (FORMATSTR) {if ( Ext.isstring (FORMATSTR)) {Ext.Date.format (New Date (), formatstr);} Else{return this.currentdate;}}}); Console.log (dateutil.currentdate); Ext.define (' Timeutil ', {extend: ' Dateutil ', Statics:{currenttime:ext.date.format (New Date (), ' y-m-d h:i:s ')}); Console.log (timeutil.currentdate);

Above two classes, if Dateutil is using the Statics property to define static properties and methods then Timeutil cannot inherit

5, single example in the EXT definition of the class is very simple, when the class is defined by adding singleton:true to define the class as a singleton, the rest of the things ext will solve for you, just like the definition of the normal class code can be.

Ext.define (' Dateutil ', {singleton:true,currentdate:ext.date.format (New Date (), ' y-m-d '), Getcurrentdate:function ( FORMATSTR) {if (ext.isstring (FORMATSTR)) {Ext.Date.format (New Date (), formatstr);} Else{return this.currentdate;}}); Console.log (Dateutil);

The singleton in JS is actually the instantiation of the class, it may not be as complicated as everyone thought.