ExtJS learning notes: defining extjs classes

ExtJS learning notes: defining extjs classes

Definition class

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 parameter is an object that contains the attributes and methods defined in the class, and the third parameter is an optional callback function that is executed after the object is instantiated.

The defined classes are converted from Ext. ClassManager to Ext. Class instances. A series of preliminary and subsequent steps are performed in this process .. The steps are as follows:
‰‰Loader: Load the required class that has not been loaded
‰‰Extend: Based on existing class extensions
‰‰Mixins: Integrates the defined Mixins into the class.
‰‰Config: Properties in the configuration options will be processed, and the corresponding get/set/apply/reset method will be created
‰‰Statics: Handling static attributes and Methods

The subsequent steps are as follows:

‰‰Aliases: Defines the alias so that you can create an instance using xtype.
‰‰Singleton: Create an instance if it is defined as a single object
‰‰Legacy: I don't quite understand. It's useless for the moment.

Or through registerPreProcessZ? Http://www.bkjia.com/kf/ware/vc/ "target =" _ blank "class =" keylink "> mirror/e7 + cDgo6zErMjPu/mirror + CjxwPjxzdHJvbmc + weight/weight + 9 + weight + sLrwb + Weight =" brush: java; "> 1. define camera functions Class: Ext. define ('hascama', {takePhoto: function () {alert ('say Cheese! ... Click! ') ;}}); 2. the smart phone category must have camera functions. ext. define ('cookbook. smartphone ', {mixins: {camera: 'hascama'}); 3. the following method can be used to call a camera function on a smart phone: Ext. define ('cookbook. smartphone ', {mixins: {camera: 'hascama'}, useCamera: function () {this. takePhoto ();}});
Use component query to access components:

1. query by xtype

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

2. cascading by css styles, such as querying all buttons in a panel

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

3. attribute values of components

var saveButton = Ext.ComponentQuery.query('button[action="saveUser"]');

4. ID-based

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

And so on.

Extended extjs Components

1. Define the class of the extension component:

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

2. Reload the initComponent method and call the method with the same name as the parent class:

Ext.define('Cookbook.DisplayPanel', {extend: 'Ext.panel.Panel',initComponent: function(){// call the extended class' initComponent methodthis.callParent(arguments);}});

3. Specific configuration items of the application:
I

nitComponent: function(){// apply our configuration to the classExt.apply(this, {title: 'Display Panel',html: 'Display some information here!',width: 200,height: 200,renderTo: Ext.getBody()});// call the extended class' initComponent methodthis.callParent(arguments);}

4. call:

var displayPanel = Ext.create('Cookbook.DisplayPanel');displayPanel.show();