Upload
enrique-ponce-de-leon
View
235
Download
0
Embed Size (px)
Citation preview
8/4/2019 Basic PMOS-ExtJs Concepts
http://slidepdf.com/reader/full/basic-pmos-extjs-concepts 1/13
8/4/2019 Basic PMOS-ExtJs Concepts
http://slidepdf.com/reader/full/basic-pmos-extjs-concepts 2/13
Understanding ExtJs
Calling ExtJs files in PMOS
JavaScript ObjectsCoding Standards
The Template method Pattern
Best Practices
Formal Declaration vs. Inline DeclarationCode Sample
Q&A
References
8/4/2019 Basic PMOS-ExtJs Concepts
http://slidepdf.com/reader/full/basic-pmos-extjs-concepts 3/13
What is ExtJs?ExtJs is one of the most popular JavaScript user interface framework, it offer a bunch
of great user interface component.
What is a Framework?Framework is a layered structure indicating what kind of programs can or should be builtand how they would interrelate. ExtJs framework also include functions or specify
programming interfaces and offers programming tools.
PMOS ExtJs IntegrationExtJs installation and availability is transparent to the developer. ExtJs is completelyintegrated into Gullivers framework and can be used into any JS file added to any
Gulliver's project.
ExtJs = Asynchronous
8/4/2019 Basic PMOS-ExtJs Concepts
http://slidepdf.com/reader/full/basic-pmos-extjs-concepts 4/13
<?php$G_PUBLISH = new Publisher;
G::LoadClass('configuration');$config = new Configurations();$oHeadPublisher =& headPublisher:: getSingleton();
//Use next line to include a JS file to PMOS Project.
$oHeadPublisher->addExtJsScript(folder/jsfile', false); //Use next line to include HTML file to PMOS Project
$oHeadPublisher->addContent(' folder/htmlfile'); //Use next line to send JS contants into ExtJs file$oHeadPublisher->assign('FORMATS',$config->getFormats());
//Use next line to render ExtJs page
G::RenderPage('publish', 'extJs');?>
PHP File:
8/4/2019 Basic PMOS-ExtJs Concepts
http://slidepdf.com/reader/full/basic-pmos-extjs-concepts 5/13
�
var obj = {};obj.x = 10; obj.y = 20;
//This method is deprecated � var obj = new Object;
obj.x = 10; obj.y = 20;
� function Foo() {this.x = 10;this.y = 20;
}
var obj = new Foo;
JS Object Declaration
ExtJs framework = OOP(Oriented ObjectProgramming) Javascript
8/4/2019 Basic PMOS-ExtJs Concepts
http://slidepdf.com/reader/full/basic-pmos-extjs-concepts 6/13
� The unit of indentation is two spaces (PM CS*)
� Avoid lines longer than 120 characters*.
� ExtJs Coding Standards inherits PMCS*
� Be generous with comments.
� All variables should be declared before used.
� Names should be formed from the 26 upper and lower case
letters (A .. Z, a .. z), the 10 digits (0 .. 9), and _ (underbar).
� Global variables should be in all caps.
*ProcessMaker Coding Standard
8/4/2019 Basic PMOS-ExtJs Concepts
http://slidepdf.com/reader/full/basic-pmos-extjs-concepts 7/13
� Each line should contain at most one statement. Put a ;
(semicolon) at the end of every simple statement.
� A return statement with a value should not use ( )
(parentheses) around the value.
� Use {} instead of new Object(). Use [] instead of new Array().
�
It is almost always better to use the === and !== operators.The == and != operators do type coercion.
� The eval function is the most misused feature of JavaScript.
Avoid it.
8/4/2019 Basic PMOS-ExtJs Concepts
http://slidepdf.com/reader/full/basic-pmos-extjs-concepts 8/13
The render method is called (This is done by a Containers layout manager).This method may not be overridden and is implemented by the Ext base class
8/4/2019 Basic PMOS-ExtJs Concepts
http://slidepdf.com/reader/full/basic-pmos-extjs-concepts 9/13
Follow your Coding Standards
Try to avoid bubbling
If you follow #1 you do not have need to use Ext.getCmp () it istoo expensive, so DO NOT.
Consider each component reusable by someone else in your team
Use proper hierarchy in namespaces (and use namespaces)
Prepare all functions, variables and structures out Ext.onReady()
and call them only if are necessary.
Check PM Extended ExtJs Classes before to create new ones.
8/4/2019 Basic PMOS-ExtJs Concepts
http://slidepdf.com/reader/full/basic-pmos-extjs-concepts 10/13
Use Inline Declarations when:� Client Performance is compromised.
� Simple structures are referenced and cannot be reused or belongs to ExtJs Core.
� Custom JS Objects do not have formal methods.
Use Formal Declarations when:�You are programming into a Team and your code can be reused.
�Always, its a best practice.
8/4/2019 Basic PMOS-ExtJs Concepts
http://slidepdf.com/reader/full/basic-pmos-extjs-concepts 11/13
varMain = function() {return {
/** properties */
panels : new Array(),configuration: {},
viewport : null,
systemInfoWindow : null,
/** init method */init : function() {
}
}();
Main.configureComponents = function(){
}Main.buildUserMenu = function(obj){
};
Main._addTab = function(id, title, src){
};
Ext.onReady(Main.init,Main, true);
File: processmaker/workflow/engine/templates/main/index.js
8/4/2019 Basic PMOS-ExtJs Concepts
http://slidepdf.com/reader/full/basic-pmos-extjs-concepts 12/13
8/4/2019 Basic PMOS-ExtJs Concepts
http://slidepdf.com/reader/full/basic-pmos-extjs-concepts 13/13
Sencha ExtJS API Documentationwww.sencha.com
Sencha Learning Centerhttp://www.sencha.com/learn/extjs/?4x
Javascript Tutorialhttp://www.w3schools.com/js/default.asp
Enrique Ponce de Leon (qennix)DevelopmentTeam Leader Colosa Inc.
[email protected] [email protected]
August, 2011