ExtJS Learning Notes: Defining ExtJS Classes

Defining classes

Ext.define (' Cookbook.vehicle ', {manufacturer: ' Aston Martin ', Model: ' Vanquish ', getdetails:function () {alert (' I am an ' + this. Manufacturer + "+ this. Model),}}, function () {Console.log (' Cookbook.vehicle class defined! ');});

The first parameter is the class name, the second argument is an object, contains the properties and methods defined in the class, and the third parameter is an optional callback function that executes after the object is instantiated.

The defined class is converted to an instance of Ext.class by Ext.classmanager, which performs a series of pre-and follow-up steps: The sequence of previous steps is as follows.
‰‰ Loader: Load the required classes that have not yet been loaded
‰‰ Extend: Based on an existing class extension
‰‰ mixins: Merging defined mixins into classes
‰‰ config: The properties in the configuration options are processed and the corresponding Get/set/apply/reset method is created
‰‰ Statics: Handling Static properties and methods

The next steps are in the following order:

‰‰ Aliases: Define aliases so that you can create instances with Xtype
‰‰ Singleton: If defined as a single object, create an instance at this time
‰‰ Legacy: Not very clear, temporarily useless

You can also add custom processing steps by using the Registerpreprocessor and Registerpostprocessor methods

If no base class is specified, the default base class is Ext.base

Mixins are some of the properties and methods of other classes that can be fused into the current class, equivalent to a subset, simplifying the definition and reducing the amount of code.

1. Define camera Function Class: Ext.define (' Hascamera ', {takephoto:function () {alert (' Say cheese! .... Click! ');}); 2. Define a smartphone class that requires a camera function. Ext.define (' Cookbook.smartphone ', {mixins: {camera: ' Hascamera '}}); 3. In the smartphone class can invoke the camera function class method: Ext.define (' Cookbook.smartphone ', {mixins: {camera: ' Hascamera '},usecamera:function () { This.takephoto ();}});

Use component queries to access components:

1. Search by Xtype

var panels = Ext.ComponentQuery.query (' panel ');

2. Cascading through CSS styles, such as querying all buttons in a panel

var buttons = Ext.ComponentQuery.query (' panel button ');

3. Through the component's property values

var Savebutton = Ext.ComponentQuery.query (' button[action= "Saveuser"] ");

4. Based on ID

var userspanel = Ext.ComponentQuery.query (' #usersPanel ');

Wait a minute.

Extending the ExtJS Component

1. Define the extension component's class:

Ext.define (' Cookbook.displaypanel ', {extend: ' Ext.panel.Panel '});

2. Overload the InitComponent method and call the parent class with the same name method:

Ext.define (' Cookbook.displaypanel ', {extend: ' Ext.panel.Panel ', initcomponent:function () {//Call the Extended class ' InitComponent methodthis.callparent (arguments);});

3. Apply specific configuration items:
I

Nitcomponent:function () {//Apply our configuration to the classext.apply (this, {title: ' Display Panel ', HTML: ' Display som E information here! ', Width:200,height:200,renderto:ext.getbody ()});//Call the Extended class ' InitComponent Methodthi S.callparent (arguments);}

4. Call:

var DisplayPanel = ext.create (' Cookbook.displaypanel ');d isplaypanel.show ();

ExtJS Learning Notes: Defining ExtJS classes