[ExtJS Study notes] section sixth ExtJS class system naming rules and definitions and debugging

This address: http://blog.csdn.net/sushengmiyan/article/details/38479079

This article Sushengmiyan

-------------------------------------------------------------Resource Link-------------------------------------------------------- ---------------

Translation Source Sencha cmd official website: http://www.sencha.com/products/extjs/up-and-running/the-class-system

--------------------------------------------------------------------------------------------------------------- ---------------------------------

This guide is intended for any developer who wants to create or inherit existing classes from Ext JS 4.X or Ext JS 5.X.

Overview

-------

EXT JS 5 comes with more than 300 classes, so far more than 2 million of developers are using ExtJS to develop, they come from different places and have different backgrounds. So in this way, we are faced with a huge challenge in providing a common code structure:

1. Everyone is familiar with, easy and easy to learn

2. Rapid development, easy commissioning, no pain during deployment

3. Organized, extensible, and maintainable

JavaScript is a prototype-oriented class language, one of the most powerful features is freedom, there are many solutions, you can use different coding styles and technical problems, but this will be at the cost of unpredictable. Without a unified structure, JavaScript code is difficult to understand, difficult to maintain, and poorly reused.

On the other hand, class-based programming is still the most popular object-oriented programming pattern, and class-based languages often require strong typing, encapsulation, and standard coding practices, and code is more likely to be predictable, extensible, and scalable by allowing developers to adhere to a number of principles. However, this model does not have the dynamic capabilities of JavaScript.

Each method has advantages and disadvantages, but we can keep the good and bad parts hidden at the same time? The answer is yes, you can find the solution in Ext JS.

Naming Conventionsusing a consistent naming convention base class, namespace, and file name in your code can help organize your code, structure, and readability. Class Naming conventionsThe class name can contain only alphanumeric characters. Numbers are allowed but not encouraged,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

This is recommended.

This is acceptable.The class name should be packaged into something like using Object Properties (.) As appropriate in the namespace. The class name should at least have a unique top-level namespace immediately following it. For example:

MyCompany.data.CoolProxyMyCompany.Application

Top-level namespaces and actual class names should hump mode everything else should be lowercase, for example:

MyCompany.form.action.AutoLoad

Classes that are not generated using Sencha try not to use ext as a top-level space. Abbreviations should also be subject to hump appointments, such as: use Ext.data.JsonProxy instead of Ext.data.JSONProxy
Use MyCompany.util.HtmlParser instead of MyCompary.parser.HTMLParser
Use MyCompany.server.Http instead of MyCompany.server.HTTP
source file naming convention the name of the class directly maps to the file path to which they are stored. Therefore, there must be only one class file. For example:
Ext.util.Observable is stored in the following directory Path/to/src/ext/util/observable.js
Ext.form.action.Submit is stored in the following directory path/to/src/ext/form/action/submit.js
MyCompany.chart.axis.Numeric is stored in the following directory path/to/src/mycompany/chart/axis/numeric.js
path/to/src is the classpath of the application. All classes should be under this common root,, appropriate namespaces should be given so that they can be best developed, maintained, and deployed. naming rules for methods and variablesIn a similar manner, class names, methods, and variable names can contain only alphanumeric characters. Numbers are allowed but not encouraged unless they belong to a technical term. Do not use underscores, hyphens, or any other non-alphanumeric characters. Methods and variable names should follow the hump principle which also applies to acronyms.
For example:
Acceptable method names:
ENCODEUSINGMD5 ()
Gethtml() instead of gethtml ()
Getjsonresponse () instead of Getjsonresponse ()
Parsexmlcontent () instead of parsexmlcontent ()
Acceptable variable names:
var isgoodname
var Base64encoder
XmlReader var
var httpserver
naming rules for propertiesClass Property names follow exactly the same conventions when except for static constants.
Static class constant properties should all be capitalized. For example:
Ext.MessageBox.YES = "YES"
Ext.MessageBox.NO = "NO"
MyCompany.alien.Math.PI = "4.13"
Statementthe old wayIf you have ever used the 4.x version of Ext, you may be familiar with the Ext.extend method to create classes:

var Mywindow = Ext.extend (Object, {...});

This method is easy to follow to create a new class that inherits from another. In addition to direct inheritance, we have noother aspectsCreate a smooth APIof theClass. This exclusion is such as configuration, static, and mixins. We will review these items in detail later in this guide.
let's look at another example:

My.cool.Window = Ext.extend (Ext.window, {...});

In this example, we want our new class namespace and extend it from Ext.window. There are two problems we need to solve:
1. When assigning a window property to the My.cool property, this object needs to exist first.
2.ext. Window needs to exist/load the page in order to referencesolve the first problem we can solve by Ext.namespace (alias Ext.ns). This method recursively creates them through the object/attribute tree if they do not exist. This requires adding the ext.extend before

Xt.ns (' My.cool '); My.cool.Window = Ext.extend (Ext.window, {...});

The second problem is not easy to solve because ext.window may depend on many other classes. In turn, these dependencies may depend on the existence of other classes. For this reason, applications written before EXT JS 4 introduce the entire ext-all.js form, regardless of whether the application requires only a small subset of the framework.The New WayEXT JS 4 eliminates these drawbacks creating a method for the class you need to remember: ext.define. Its basic syntax is as follows:

Ext.define (ClassName, Members, onclasscreated);

ClassName: Class nameMembers: An object that represents a collection of key-value pairs for a class member onclasscreated: An optional callback function is called when all the defined classes and classes themselves are fully prepared. Because of the asynchronous nature of class creation, this callback is useful in many cases. These will be discussed further in part fourth
For example:

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: We have created an instance of a new my.sample. Use the Ext.create () method. We can use the New keyword (My.sample.Person ()). However, the recommended habit is always to use ext.create because it allows you to take advantage of dynamic loading. More information on dynamic loading see Getting Started Guide
Configurationin ext JS 4, we introduced a dedicated configuration attribute that was created by powerful processing Ext.class pre-processors before the class. Features include:1. Configuration from other class members is fully encapsulated
The 2.Getter and setter methods are automatically generated for each configuration property to a method that has not yet been defined during the class prototype class creation.
3. One application method also configures properties for each build. The internal auto-generation setter method invokes the value set before the method is applied. You can override the method request configuration property if you need to run the custom logic before setting the value. If the request does not return a value, the setter does not set the value.
for Ext class use configuration, ext JS 5 eliminates the need to manually call Initconfig (). However, for your own class, the extension ext.base initconfig () is still required.
You can see the following configuration example:

Ext.define (' My.own.Window ', {   /** @readonly */   iswindow:true,   config: {       title: ' Title here ',       Bottombar: {           height:50,           resizable:false       }   },   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) {           if (! This.bottombar) {               return ext.create (' My.own.WindowBottomBar ', Bottombar);           }           else {               this.bottomBar.setConfig (Bottombar);}}}   ); * * A Child component to complete the example. */ext.define (' My.own.WindowBottomBar ', {   config: {       height:undefined,       resizable:true   }});

Here is an example of how to use it:

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}); alert (Mywindow.getbottomba R (). GetHeight ()); Alerts 100

Static Variablesstatic variables can be defined using the Statics configuration:

Ext.define (' computer ', {    statics: {        instancecount:0,        factory:function (brand) {            //' This ' in static Methods refer to the class itself            return new this ({Brand:brand});        }    ,    config: {        brand:null    }}); 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 property. Alerts "Mac"

error control and debugging Ext JS includes some useful features that will help you debug and error-handle.
You can use the display name of any method of Ext.getdisplayname (). This is particularly useful for throwing the wrong class name and method name Description:

throw new Error (' [' + ext.getdisplayname (Arguments.callee) + '] Some message here ');

When there are errors thrown when using Ext.define, you should look at this method and the stack information of the class, you can see Google Chrome in the error message is as follows: