Basic PMOS-ExtJs Concepts

8/4/2019 Basic PMOS-ExtJs Concepts

http://slidepdf.com/reader/full/basic-pmos-extjs-concepts 1/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



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



<?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:



�

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



� 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



� 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.



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



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.



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.



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





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

Basic PMOS-ExtJs Concepts

Documents