extjs--using Ext.define Custom Classes

JavaScript Custom Classes

var person = function (name,age) {

This. Name = "";

This. Age = 26;

This. Say = function (msg) {

Alert (this. Name + "Says:" + msg);

}

This.init = function (name,age) {

This. name = name;

This. Age = age;

}

This.init (name, age);

}

In this code, we define the person class, which has the name and age two properties, with the Say and init public methods. When a class is created, the initialization of the class is defined by calling the Init method (so the Init method can be thought of as the constructor of the class). Let's take a look at the usage of this class:

var tom = new Person ("Tom", 26);

Tom.say ("hello!");

Run effect

custom Classes in ExtJS

Ext.define ("person", {

Name: ";

age:0;

Say:function (msg) {

Ext.Msg.alert (this. Name + "Says:" + msg);

},

Constructor:function (name, age) {

This. name = name;

This. Age = age;

}

});

In this code, we use the Ext.define method to customize a person class, it also has the name and age property, with the Say method, constructor its constructor, with a dedicated constructor, we omit the code to write the Init method, The initialization of the class is done directly in the constructor, and its usage is unchanged, still the previous code:

var tom = new Person ("Tom", 26);

Tom.say ("hrllo!");

Look at the effect of the operation:

inheritance of classes in ExtJS

ExtJS allows extensions to existing classes, whose extensions can be implemented through inheritance. Next we inherit from the person class that we just defined with ExtJS, define a developer class that inherits from person and also has the coding method, the code is as follows:

Ext.define ("Developer", {

Extend:person,

Coding:function (code) {

Ext.Msg.alert (this. Name + "Coding:" + code);

},

Constructor:functuion () {

This.callparent (arguments);

}

});

As can be seen from the code, ExtJS uses extend to implement inheritance. We have added the coding method for the developer class, which is our extension to the person class. In the constructor, the initialization of the property is implemented by calling the This.callparent method. It should be explained that if only the constructor of the parent class is called here, it can be omitted, and ExtJS will automatically call the parent class's constructor. So our code here can be simplified:

Ext.define ("Developer", {

Extend:person,

Coding:function (code) {

Ext.Msg.alert (this. Name + "Coding:" + code);

}

});

It is important to note that if you use constructors in subclasses, ExtJS will no longer automatically invoke the constructor of the parent class.

We want to use the developer class, the code is simple:

var bill = new Developer ("Bill", 26);

bill.coding ("int num1 = 0");

Run effect

options for classes in ExtJS-config

First look at an example, we define a Window object in ExtJS, with the following code:

var win = ext.create ("Ext.window.Window", {

Title: "Sample Window",

WIDTH:300,

hidth:200

});

Win.show ();

In the above code, we created a Window object through the Ext.create method, the first parameter of the Ext.create method is the class name, and the second parameter is the option of the class, which is a JSON-formatted object used to initialize the Window object. Our window is run as follows:

Imagine that if we had dozens of properties in our class, it would be a horrible thing to use the constructor to pass dozens of parameters to initialize it. Fortunately ExtJS provides us with this convenience, we can add configuration items to it when defining the class, and then call the ExtJS built-in method to complete the initialization and generate accessors (similar to the Get and set methods inside C #).

Let's modify the person class so that it can be initialized with config:

Ext.define ("person" {

Config: {

Name: ",

age:0

},

Say:function (msg) {

Ext.Msg.alert ("this.") Name "+" Says: "+ msg);

},

Constructor:function (config) {

This.initconfig (config);

}

});

We add a config entry in the definition of the class, add the properties that need to be done in the configuration, and in the constructor, we complete the initialization of the config by calling the This.initconfig method. Take a look at the usage:

var Tom = ext.create ("person", {

Name: ' Tom ',

Age:26

});

Tom.say ("Hello");

When we define the person class object, we use the Ext.create method, pass in the class name and the configuration item, and then call Tom's say method to run the effect

In addition to the clearer and more concise code, ExtJS also generated accessors for us, and we can access Tom's properties in the following ways:

Tom.setage (20);

Alert (Tom.getage ());

ExtJS generates a GET, set method that allows us to access the properties of an object in such a way.

aliases for classes in ExtJS- alias

When we look at the ExtJS API, there are often instructions on the left:

The red box is circled by the alias of this class, which corresponds to the full name of the class Ext.window.Window, which can be seen as simpler, easier to remember and write. When we instantiate a class, we can use aliases instead of the full name of the class, such as the win object we defined earlier, and his code can be modified to:

var win = ext.create ("Ext.window" {

Title: "Sample Window",

WIDTH:200,

height:300

});

Win.show ();

After reading the example, do you want to implement aliases in the custom class as well? To better demonstrate the alias, we make a simple modification to the person class to modify the name of the class to Myapp.person (which is equivalent to adding a namespace to the people):

Ext.define ("Myapp.person", {

Config: {

Name: ",

age:0

},

Say:function (msg) {

Ext.Msg.alert (this. Name + "Says:" + msg);

},

Constructor:function (config) {

This.initconfig (config);

}

});

We only modified the first line, and the other code did not change. This time we instantiate the person class with the previous code:

var Tom = ext.create ("person", {

Name: ' Tom ',

Age:26

});

Tom.say ("Hello");

Refresh the page, unfortunately we got two errors:

The first error, ExtJS dynamic loading detects that the system currently does not have the definition of the person class, and then automatically load Person.js, this path is not present, so there are 404 errors found. On the issue of dynamic loading we'll talk about it next.

The second error, the person is not defined, so the system throws a type error message. To solve this problem, we need to modify the first parameter of the Ext.create method to "Myapp.person". But we do not do this here, because we still want to use the person to complete, then how to do? This is where the alias is used.

We add aliases for the Myapp.person class:

Ext.define ("Myapp.person", {

Config: {

Name: ",

age:0

},

alias: ' Person ',

Say:function (msg) {

Ext.Msg.alert (this. Name + "Says:" + msg);

},

Config:function (config) {

This.initconfig (config);

}

});

Very simply, as long as one line of code, ExtJS for us to complete the definition of the alias.

Re-refresh the page, we get the desired result:

dynamic Loading in the ExtJS

It means: If Ext.loader is available and the class is not yet defined, it will attempt to load the class by synchronous loading.

Next, let's try the function of the class dynamic loading. The location of our class Myapp.person class is:

We're going to tell ExtJS the path to our MyApp namespace, the code is as follows:

Window.rooturl = "@Url. Content (" ~/")";

Ext.Loader.setConfig ({

Enabled:true,

Paths: {

Myapp:rooturl + "Resources/js/myapp"

}

});

We can write this code in layout because it is used on every page.

After completing the loader configuration, we can remove the reference to the Person.js, and our program will still run correctly:

var Tom = ext.create ("Myapp.person", {

Name: ' Tom ',

Age:26

});

Tom.say ("Hello");

Note that we are using the full name of the class here, because there is no way to find the correct path when using aliases. The loader matches the MyApp in the path through the class name class, and then loads the person.js.

In addition, we can also manually load the Person.js, the code is as follows:

Ext.require ("Myapp.person");

When the Myapp.person class is loaded manually, we can continue to use aliases to define the object of the class:

Var Tom = ext.create ("person", {

Name: ' Tom ',

Age:26

});

Tom.say ("Hello");

extjs--using Ext.define Custom Classes