"Translation" ExtJS coding style Guide and example

Original: ExtJS Code Style Guide with examples

Ext JS style guide:

• Well-known and easy to learn
• Fast development, easy commissioning and easy deployment
• Well-organized, scalable and maintainable

Ext JS Application Naming convention: 1, class

The class name should use Hump naming (camelcased).
Do not use underscores, or other connection characters.
such as: MyCustomClass

Classes that are not distributed through Sencha should never use ext as the top-level namespace.
In the class name, you should use at least one point number to divide the namespace.
such as Toplevelnamespace.myclassname

The top-level namespace and the actual class name should be named with the hump, while others should use lowercase letters.
A good class name
such as: TopNamespace.midlevelnamespace.MyCustomClass
such as: MyModule.view.UserGrid
Bad class name
Eg:MyCompany.useful_util. Debug_toolbar

2. Use namespaces to group related components

Namespaces should be built on a directory structure. The catalog should group components into logical modules based on the functional business components. This means that maintenance users can manage components based on namespaces and components:

Directory structure:
Mymodule/controller/usercontroller.js
Mymodule/store/userstore.js
Mymodule/model/usermodel.js
Mymodule/view/usergrid.js
Mymodule/view/userform.js

Class Name:
MyModule.controller.UserController
MyModule.store.UserStore
MyModule.model.UserModel
MyModule.view.UserGrid
MyModule.view.UserForm

3, Ext JS components and controls

All components should be prefixed with 3 lowercase letters, followed by proper use of each word (e.g. txtFirstName, Cbodisplay, dtmstartdate).

Form Panel = frm
Text Field = txt
Combo Box = CBO
Button = btn
Label = LBL
Check Box = chk
Date Field = DTM
Number Field = num
Grid = GRD
tab Panel = Tab
Tab Page = PGE
Panel = PNL
Container = Con
Toolbar = tlb
Paging Toolbar = PGT

Each Sencha component should have Itemid set to the name of the control. Use the hump name to name Itemid (such as txtFirstName).
such as: Itemid:txtfirstname

4. Variables, constants, private variables, properties, and methods:

A. Variables should always be named with the hump.

Such as:
var isgoodname;
var Base64encoder;
var thisismyname;
var Base64encoder

B. Constants should use uppercase letters

Such as:
var SALARY = 1000;
var max_count = 10;
var URL = "http://www.mydomain.net/";

C. Private variables should start with "_"

such as: Var _modelrecord;
var _get = Ext.data.Model.prototype.get;
var _set = Ext.data.Model.prototype.set;
var val = _get.apply (this, arguments); Private variable used in Thisway

D. Properties should always be named with the hump. Static properties should use uppercase letters.

such as 1:
Ext.MessageBox.YES = "YES";
MyCompany.alien.Math.PI = "4.13";
such as 2:
/** @property {String} mask_message_saving_form MASK MESSAGE for saving form*/
Mask_message_saving_form: ' Saving FORM data, please wait ... ',

E. Method: The method should always be named with the hump. This also applies to acronyms.

Such as:
Acceptable method names:
ENCODEUSINGMD5 ()
Getextcomponentbyreference ()
Gethtml () instead of gethtml ()
Getjsonresponse () instead of Getjsonresponse ()
Parsexmlcontent () instead of parsexmlcontent ()

5. Public base class to annotate the document

How a component is used as a common ancestor of other components, it should be placed in the common directory of love.
Such as:
/**
* @class common.commonfunctions
* @author Sencha User
*
* This file contains public functions and can be used for any Ext JS application
*
*
*/
Ext.define (' Common.commonfunctions ', {});

6. Add a comment document for the method

Such as:
/**
* This would return an ExtJS component based on a reference
* To that component. This reference can either is the component
* itself or the comopnent ' s ID.
* @param {string/object} ref A reference to an ExtJS component, can either is the the Components ID or the component Itsel F
* @return {Object}
*/
function Getextcomponentbyreference (ref) {
var component;
if (typeof ref = = = = ' String ') {
component = EXT.GETCMP (ref);
} else if (typeof ref = = = = ' object ') {
component = ref;
} else {
return false;
}
return component;
}

7. Add a comment document for the controller's method

Such as:
/**
* Function to provide logic to validate a BPM form prior to submitting it.
* Override This method in your own custom controller to add form specific submit validation.
* Note:by Default This function would simply call Form.isvalid () to determine if form is valid.
*
* @returns {Boolean} If the form is valid for submit or not
*/
Isbpmformvalidforsubmit:function () {
Return This.getbpmform (). IsValid ();
},

8. Global References:

Note: To specify where they are used
var globalpreferedmode = false;
var globaluserpreferencearr = []; Array used to compare with preference cols of trade grids while applying preferences

9. To add a comment document for any user-defined configuration items within the component and controller

Such as:

/**
* @cfg {Number} Headercolumns
* The total number of columns to create in the table for this layout. If not specified, all components added
* To this layout is rendered into a single row using one column per Component.
*/
Headercolumns:6,

/**
* @cfg {object/object[]} headerfields
* A single item, or an array of the child of the added to IS container.
*/
Headerfields: [],

/** @readonly */
Iswindow:true,

/** @cfg {String} title The default window ' s title */
Title: ' Title here ',

/** @cfg {Object} bottombar The default config for the bottom bar */
Bottombar: {
Enabled:true,
HEIGHT:50,
Resizable:false
},

/**
* @cfg {String} store (required)
* The key of the store to is used to the "this form."
*/
Store: '

10. Best Practice: Use scope (SCOPE)

Such as:

Getpeople:function (People) {
Ext.Ajax.request ({
URL: ' people.php ',
Method: ' GET ',
Params: {
Id:1,
Name: ' Test '
},
Scope:this,
Success:this.onAfterGetPeople
});
},

Onaftergetpeople:function (response) {
Dp some stuff
var jsondata = Ext.decode (Response.responsetext);
Process Server Response here
This.getdepartments (jsondata,departments);
},
Getdepartments:function (departments) {
Ext.Ajax.request ({
URL: ' departments.php ',
Method: ' GET ',
Params:departments,
Scope:this,
Success:this.onAfterGetDepartments
});
},
Onaftergetdepartments:function (response) {
Do + work
}

11. Best practices: Correct indentation and optimization of code

Such as:
Segmentcontactmodule:function (segbutton,button,pressed) {

var contactliststore = Ext.getstore (' Contactliststore ').
Contactview = This.getcontactview (),
ContactList = Contactview.query (' #listContactItemsId ') [0],
Contactdetailview= This.getcontactdetailview (),
Selectedrecords = Contactlist.getselection (),
ButtonText = Button.gettext ();

Contactliststore.clearfilter ();

if (pressed) {
if (contactliststore.getcount () = = 0) {
Contactdetailview.setactiveitem (0);
}else{

if (selectedrecords.length>0) {
This.contactlistitemevent (Null,null,null,selectedrecords[0]);
}else{
Contactdetailview.setactiveitem (0);
}
}
}
else{
if (selectedrecords.lenght>0) {
This.contactlistitemevent (Null,null,null,selectedrecords[0]);
}
}
}//End of method

12. Best practices: Always make your code readable

Such as:
if (!this.isreadable ()) {
This.refactorwith ({
Properindentation:true,
Optimizedcodereadability:true

});
}else{
This.behappy ();
}

13. Best practice: Return type of method

eg
Testsomeval:function (someval) {
Return (Someval <=2); Add parentheses to improve readability
}

14. Best Practices:

Lazy initialization-Add an entry or view only when necessary
Deferred rendering-saves browser time
Reusing something-saving development time

15. Best practice: Two rules for this

When a function is executed through a var reference, the default execution context (this) is window
such as:
var myfn = function () {
 console.log (this);
};
Myfn ();

When a function executes through the key value of an object, the execution context (this) is object
such as:
 var member = {
  name: ' Eric ',
      getname:function () {
   console.log (this);     
 }
  };
Member.getname ();

Mix:
such as:
var getName = member.getname;
GetName ();

such as:
var member1 = {
  name: ' Eric ',
     getname:function () {
    Console.log (this);     
 }
 };
var member2 = {
  name: ' Bob ',
     getName:member1.getName
 };
Member2.getname ();