Ext JS 4 from the bottom of the class system has been reconstructed, this is the first time in the history of Ext JS to the class system of huge reconstruction. The new architecture is almost always applied to each of the Ext JS 4 classes, so it is important that you have a good understanding of it before you start coding.
This manual applies to any developer who wants to create a new class or inherits existing classes in Ext JS 4, divided into 4 parts:
Part One: "Overview"--explains the need to create a robust class system
Part Two: "Naming conventions"--a discussion of the best naming conventions for classes, methods, properties, variables, and files
Part Three: "Practice"-Provides a step-by-step code example
Part Four: "Error handling and debugging"--provides very useful tips and tricks on how to handle exceptions
I. Overview
EXT JS 4 has more than 300 classes, so far we have a huge community of over 200,000 developers who come from various programming backgrounds around the world. For a framework on such a large scale, we face a huge challenge to provide a common code architecture:
Friendly and easy to learn
Rapid development, easy to debug, simple to deploy
Well organized, extensible and maintainable
JavaScript is an untyped, prototype-oriented language, one of the most powerful features of this language is flexibility. It can accomplish the same work in a variety of different ways, using a variety of coding styles and techniques. However, this feature presents an unforeseen cost, and without a unified structure, JavaScript code is difficult to understand, maintain, and reuse.
Class-based programming, in other words, using the most popular OOP model. Class-based languages are typically strongly typed languages, provide encapsulation, and have standard coding conventions. Typically, developers follow a consistent set of coding rules, and written code is more likely to be predictable, extensible, and extensible. However, they do not have the same dynamic capabilities of languages as JavaScript.
Each approach has its own pros and cons, but can we take advantage of both of them and hide their drawbacks? The answer is yes, we have achieved this solution in Ext JS 4.
two. Naming conventions
Always use consistent naming conventions based on classes, namespaces, and filenames in your code, which will help keep your code easily organized, structured, and readable.
1) class
Class names can contain only alphanumeric characters, and numbers are not allowed in most cases unless they belong to a technical term. Do not use underscores, hyphens, or any other non-alphanumeric characters. For example:
Mycompany.useful_util. Debug_toolbar is not possible.
MyCompany.util.Base64 is okay.
The class name should be placed in the appropriate namespace by using the object's point expression (.) property. At a minimum, the class name should have a unique top-level namespace. For example:
MyCompany.data.CoolProxy
Mycompany.application
Top-level namespaces and class names should be named after the hump, except that the rest should be all lowercase. For example:
MyCompany.form.action.AutoLoad
Classes that are not published by Sencha Ext JS cannot use ext as the top-level namespace.
Acronyms should also follow the above guidelines for hump naming. For example:
Ext.data.JsonProxy replaced Ext.data.JSONProxy.
MyCompany.util.HtmlParser replaced MyCompary.parser.HTMLParser.
MyCompany.server.Http replaced MyCompany.server.HTTP.
2) source Files
The names of the classes map directly to the file path where they are stored, so that each file can have only one class, for example:
Ext.util.Observable stored in/to/src/ext/util/observable.js
Ext.form.action.Submit stored in/to/src/ext/form/action/submit.js
MyCompany.chart.axis.Numeric stored in/to/src/mycompany/chart/axis/numeric.js
The path/to/src is the root of your application's class, and all classes should be placed under this common root directory.
3 methods and variables
Like the class name, methods and variable names can contain only alphanumeric characters, and numbers are not allowed in most cases unless they belong to a technical term. Do not use underscores, hyphens, or any other non-alphanumeric characters.
Methods and variable names should always be hump-style, which also applies to acronyms.
Example:
Acceptable method Name: EncodeUsingMd5 (), gethtml () replaces gethtml (), Getjsonresponse () replaces Getjsonresponse (), Parsexmlcontent () Instead of Parsexmlcontent ()
Acceptable variable names: Var isgoodname, var Base64encoder, var XmlReader, var httpserver
4) Property
Class property names completely follow the same naming conventions as the above methods and variables, except for static constants.
Static class properties, which are constants, should all be capitalized, for example:
Ext.MessageBox.YES = "YES"
Ext.MessageBox.NO = "NO"
MyCompany.alien.Math.PI = "4.13"
three. Practice
1. Statement
1.1) The old method
If you have ever used any previous version of Ext JS, you must be familiar with using Ext.extend to create a class:
var Mywindow = Ext.extend (Object, {...});
It's easy to create a new class that inherits from other classes, but in addition to direct inheritance, we don't have a good API to create other aspects of the class, such as configuration, static configuration, and mixed classes, which we'll review in detail later.
Let's take a look at another example:
My.cool.Window = Ext.extend (Ext.window, {...});
In this example, we want to create a new class with a namespace and let it inherit Ext.window, and here are two issues to solve:
My.cool must be an existing namespace object so that we can assign window as its property
Ext.window must exist and be loaded so that it can be referenced
1th is usually solved with Ext.namespace (alias is Ext.ns), this method recursively creates objects that do not exist, and the annoying thing is that you always have to remember to add them to the Ext.extend:
Ext.ns (' My.cool '); My.cool.Window = Ext.extend (Ext.window, {...});
The second problem, however, is not easy to solve, because Ext.window may depend on many other classes, it may be directly or indirectly inherited from those dependent classes, and these dependent classes may depend on other classes. For this reason, applications written prior to Ext JS 4 typically introduce the entire library file Ext-all.js, although only a small portion of it may be required.
1.2) New methods
EXT JS 4 eliminates all of these drawbacks, and you only need to remember that the only way to create a class is: Ext.define, which has the following basic syntax:
Ext.define (ClassName, Members, onclasscreated);
ClassName: Class name
A member is a large object that represents a collection of class members, a series of key-value pairs
Onclasscreated is an optional callback function that is invoked when all the dependencies of the class are ready and the class is fully created. This callback function is useful in many cases and is discussed in depth in part fourth.
Example:
Copy Code code as follows:
Ext.define (' My.sample.Person ', {
Name: ' Unknown ',
Constructor:function (name) {
if (name) {
THIS.name = name;
}},
Eat:function (FoodType) {
Alert (THIS.name + "is eating:" + foodtype); }});
var aaron = ext.create (' My.sample.Person ', ' Aaron ');
Aaron.eat ("salad"); Alert ("Aaron is Eating:salad");
Note that we created an My.sample.Person instance with the Ext.create () method. Of course we can also use the New keyword (new My.sample.Person ()), but we recommend that you develop the habit of always using ext.create, because it can take advantage of dynamic loading capabilities. For more information about dynamic loading, please see ext JS 4 Getting Started guide.
2. Configure
In Ext JS 4, we introduce a dedicated config property that is processed by a powerful preprocessor class Ext.class before the class is created, with the following characteristics:
Configuration is fully encapsulated from other class members
The getter and setter methods for each config property are automatically generated in the class prototype, if these methods are not defined in the class
Also, a apply method is generated for each config property, and the automatically generated setter method invokes the Apply method before the value is set internally. If you want to run custom logic before setting a value, you can override the Apply method. If apply does not return a value, the setter method will not set the value. Let's look at the following Applytitle method:
The following example defines a new class:
Copy Code code as follows:
Ext.define (' My.own.Window ', {/** @readonly * *
Iswindow:true,
Config: {
Title: ' Here's the title ',
Bottombar: {
Enabled:true,
HEIGHT:50,
Resizable:false}},
Constructor:function (config) {
This.initconfig (config); },
Applytitle:function (title) {
if (! Ext.isstring (title) | | Title.length = = 0) {
Alert (' Error:title must be a valid Non-empty string ');
} else {
return title;
} },
Applybottombar:function (Bottombar) {
if (Bottombar && bottombar.enabled) {
if (!this.bottombar) {
Return ext.create (' My.own.WindowBottomBar ', bottombar);
} else {
This.bottomBar.setConfig (Bottombar);
}
}
}});
Here is an example of how to use this new class:
Copy Code code as follows:
var Mywindow = ext.create (' My.own.Window ', {
Title: ' Hello World ',
Bottombar: {
HEIGHT:60}});
Alert (Mywindow.gettitle ()); Alerts "Hello World"
Mywindow.settitle (' Something New ');
Alert (Mywindow.gettitle ()); Alerts "Something New"
Mywindow.settitle (NULL); Alerts "Error:title must be a valid Non-empty string"
Mywindow.setbottombar ({height:100}); Bottom Bar ' s height is changed to 100
3. Static Configuration
Static configuration members can be defined by using the Statics property:
Copy Code code as follows:
Ext.define (' Computer ', {
Statics: {
instancecount:0,
Factory:function (Brand) {
' This ' in-static methods refer to the class itself
Return to new this ({Brand:brand}); } },
Config: {
Brand:null},
Constructor:function (config) {
This.initconfig (config);
The ' self ' property of a instance refers to its class
This.self.instanceCount + +; }});
var dellcomputer = computer.factory (' Dell '); var applecomputer = computer.factory (' Mac ');
Alert (Applecomputer.getbrand ());
Using the auto-generated getter to get the value of a config. Alerts "Mac"
alert (Computer.instancecount);
Alerts "2"
four. Error handling and debugging
EXT JS 4 contains some useful features that can help you debug and error-handling:
You can use the Ext.getdisplayname () method to get the display name of any method, which is particularly useful when you throw an error, and it can be used to display the class name and method name in the error description:
throw new Error (' [' + ext.getdisplayname (Arguments.callee) + '] Some message here ');
When the error is thrown from any method of the class defined by Ext.define (), if you are using a WebKit browser (Chrome or Safari), you will see the method name and class name in the call stack. For example, here is the stack information seen from Chrome:
