SlideShare a Scribd company logo
1 of 30
Download to read offline
Adding Features to Ext JS

     Get Ext JS to do your bidding
Options



          ● Extend
          ● Override
          ● Plugin
          ● Sequence/Intercept
Extending

New component based on another

Inherits functionality

Somewhat lightweight (well come back to this)
Four step process
Basic Extending

Pick a class to start from (well come back to this)
CustomPanel = Ext.extend(Ext.Panel, {
    initComponent : function() {
       Ext.apply(this, { title: 'My Custom Panel' });
       CustomPanel.superclass.initComponent.call(this);
    },
    newMethod: function() {},
    overriddenMethod: function() {}
});

Ext.reg('custompanel', CustomPanel);
Basic Extending

Configure it with initComponent (well come back to this)
CustomPanel = Ext.extend(Ext.Panel, {
    initComponent : function() {
       Ext.apply(this, { title: 'My Custom Panel' });
       CustomPanel.superclass.initComponent.call(this);
    },
    newMethod: function() {},
    overriddenMethod: function() {}
});

Ext.reg('custompanel', CustomPanel);
Basic Extending

Add your own methods (or override existing)
CustomPanel = Ext.extend(Ext.Panel, {
    initComponent : function() {
       Ext.apply(this, { title: 'My Custom Panel' });
       CustomPanel.superclass.initComponent.call(this);
    },
    newMethod: function() {},
    overriddenMethod: function() {}
});

Ext.reg('custompanel', CustomPanel);
Basic Extending

Register it (for use as an xtype)
CustomPanel = Ext.extend(Ext.Panel, {
    initComponent : function() {
       Ext.apply(this, { title: 'My Custom Panel' });
       CustomPanel.superclass.initComponent.call(this);
    },
    newMethod: function() {},
    overriddenMethod: function() {
        CustomPanel.superclass.overriddenMethod.call(this);
    }
});

Ext.reg('custompanel', CustomPanel);
Basic Extending

Party (like it's 1999)

var myPanel = new CustomPanel({border: true});


...items: [{ xtype: 'custompanel', border: true }]
Extend From...

Classes that only need events should extend Ext.util.Observable

Classes that will serve as UI widgets should extend Ext.Component

Use Ext.BoxComponent if simple layout management will be necessary

Classes that can contain other components should extend Ext.Container

Classes that require a title bar, toolbar or other advanced display features should
extend Ext.Panel

Look at the docs to see the inheritance chain for classes (upper right corner)
Four Ways to add Features to Ext JS
How much overhead does extending add?
Overhead


Only as much code as you add
CustomPanel = Ext.extend(Ext.Panel, {
    initComponent : function() {
       Ext.apply(this, { title: 'My Custom Panel' });
       CustomPanel.superclass.initComponent.call(this);
    },
    newMethod: function() {},
    overriddenMethod: function() {}
});

Ext.reg('custompanel', CustomPanel);
Prototypical Inheritance




         Ugly word, great for memory usage
Extending does not copy, it creates memory pointers.


                  .constructor
Override

Overwrites existing library code

Used to change base functionality or fix bugs

Can be evil (don't let it become your crutch)

Keep separate from the your code (ie: overrides.js)
Basic Override

// Class definition
ExtClass = Ext.extend(Ext.Component, {
    existingMethod: function() {}
    overriddenMethod : function() {}
});

// Our override
Ext.override(ExtClass, {
    newMethod : function() {},
    overriddenMethod : function() {}
});
Basic Override

existingMethod remains
newMethod is added (does not exist yet)
overriddenMethod is completely replaced (exists already)
// Class definition
ExtClass = Ext.extend(Ext.Component, {
    existingMethod: function() {}
    overriddenMethod : function() {}
});

Ext.override(MyClass, {
    newMethod : function() {},
    overriddenMethod : function() {}
});
Plugins

Adds functionality to various classes

Can be used on any class that inherits from Ext.Component

Independent of base class (more on this later)
Basic Plugin

Extend a base class (usually a simple one)
Ext.ux.PluginName = Ext.extend(Ext.util.Observable, {
    constructor: function(config){
       Ext.apply(this,config);
       Ext.ux.PluginName.superclass.constructor.call(this, config);
    },
    init: function(cmp){
       // do stuff
    }
});
Ext.preg('plugin-name',Ext.ux.PluginName);
Basic Plugin

Process any plugin configuration (can be omitted)
Ext.ux.PluginName = Ext.extend(Ext.util.Observable, {
    constructor: function(config){
       Ext.apply(this,config);
       Ext.ux.PluginName.superclass.constructor.call(this, config);
    },
    init: function(cmp){
       // do stuff
    }
});
Ext.preg('plugin-name',Ext.ux.PluginName);
Basic Plugin

Do stuff on host class initialization
Ext.ux.PluginName = Ext.extend(Ext.util.Observable, {
    constructor: function(config){
       Ext.apply(this,config);
       Ext.ux.PluginName.superclass.constructor.call(this, config);
    },
    init: function(cmp){
       // do stuff
    }
});
Ext.preg('plugin-name',Ext.ux.PluginName);
Basic Plugin

Register the plugin
Ext.ux.PluginName = Ext.extend(Ext.util.Observable, {
    constructor: function(config){
       Ext.apply(this,config);
       Ext.ux.PluginName.superclass.constructor.call(this, config);
    },
    init: function(cmp){
       // do stuff
    }
});
Ext.preg('plugin-name',Ext.ux.PluginName);
We Have a Plugin

Party (like it's 1999) again


...items: [{
    xtype: 'custompanel',
    border: true,
    plugins: [{
       ptype: 'plugin-name',
       isAwesome: false
    }]
}]
Not awesome yet?




 (lets make it awesome)
Awesome Plugin

The magic happens here
  init: function(cmp){
     this.hostCmp = cmp
     cmp.setTitle('Awesome');
  }


init is called just after initComponent but before render
Sequence/Intercept

Piggyback on existing functions

Useful for small changes/features

Be aware of impact
Basic Sequence/Intercept

Intercept happens before

Sequence happens after
Basic Sequence/Intercept

Class and method to sequence or intercept

Ext.intercept(Ext.form.Field.prototype, 'initComponent', function() {
var fl = this.fieldLabel, ab = this.allowBlank;
if (ab === false && fl) {
this.fieldLabel = '<span style="color:red;">*</span> '+fl;
} else if (ab === true && fl) {
this.fieldLabel = ' '+fl;
}
});
Basic Sequence/Intercept

Scope and arguments remain the same

Ext.intercept(Ext.form.Field.prototype, 'initComponent', function() {
var fl = this.fieldLabel, ab = this.allowBlank;
if (ab === false && fl) {
this.fieldLabel = '<span style="color:red;">*</span> '+fl;
} else if (ab === true && fl) {
this.fieldLabel = ' '+fl;
}
});
Basic Sequence/Intercept

...
{
       fieldLabel: 'Last Name',
       allowBlank: false,
       name: 'last'
},{ß
       fieldLabel: 'Company',
       allowBlank: true,
       name: 'company'
}
...

More Related Content

What's hot

Functional Structures in PHP
Functional Structures in PHPFunctional Structures in PHP
Functional Structures in PHPMarcello Duarte
 
JSConf: All You Can Leet
JSConf: All You Can LeetJSConf: All You Can Leet
JSConf: All You Can Leetjohndaviddalton
 
Javascript Testing with Jasmine 101
Javascript Testing with Jasmine 101Javascript Testing with Jasmine 101
Javascript Testing with Jasmine 101Roy Yu
 
Test-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS ApplicationsTest-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS ApplicationsFITC
 
Unit testing with mocha
Unit testing with mochaUnit testing with mocha
Unit testing with mochaRevath S Kumar
 
Unit testing JavaScript using Mocha and Node
Unit testing JavaScript using Mocha and NodeUnit testing JavaScript using Mocha and Node
Unit testing JavaScript using Mocha and NodeJosh Mock
 
Java script advance-auroskills (2)
Java script advance-auroskills (2)Java script advance-auroskills (2)
Java script advance-auroskills (2)BoneyGawande
 
C++ Programming - 9th Study
C++ Programming - 9th StudyC++ Programming - 9th Study
C++ Programming - 9th StudyChris Ohk
 
Jasmine - why JS tests don't smell fishy
Jasmine - why JS tests don't smell fishyJasmine - why JS tests don't smell fishy
Jasmine - why JS tests don't smell fishyIgor Napierala
 
Testing JavaScript Applications
Testing JavaScript ApplicationsTesting JavaScript Applications
Testing JavaScript ApplicationsThe Rolling Scopes
 
Mirror, mirror on the wall: Building a new PHP reflection library (DPC 2016)
Mirror, mirror on the wall: Building a new PHP reflection library (DPC 2016)Mirror, mirror on the wall: Building a new PHP reflection library (DPC 2016)
Mirror, mirror on the wall: Building a new PHP reflection library (DPC 2016)James Titcumb
 
C++ Programming - 12th Study
C++ Programming - 12th StudyC++ Programming - 12th Study
C++ Programming - 12th StudyChris Ohk
 
AngularJS Unit Testing w/Karma and Jasmine
AngularJS Unit Testing w/Karma and JasmineAngularJS Unit Testing w/Karma and Jasmine
AngularJS Unit Testing w/Karma and Jasminefoxp2code
 
Zen: Building Maintainable Catalyst Applications
Zen: Building Maintainable Catalyst ApplicationsZen: Building Maintainable Catalyst Applications
Zen: Building Maintainable Catalyst ApplicationsJay Shirley
 
Testing JS with Jasmine
Testing JS with JasmineTesting JS with Jasmine
Testing JS with JasmineEvgeny Gurin
 
Workshop quality assurance for php projects - ZendCon 2013
Workshop quality assurance for php projects - ZendCon 2013Workshop quality assurance for php projects - ZendCon 2013
Workshop quality assurance for php projects - ZendCon 2013Michelangelo van Dam
 

What's hot (20)

PL/SQL Unit Testing Can Be Fun!
PL/SQL Unit Testing Can Be Fun!PL/SQL Unit Testing Can Be Fun!
PL/SQL Unit Testing Can Be Fun!
 
Functional Structures in PHP
Functional Structures in PHPFunctional Structures in PHP
Functional Structures in PHP
 
JSConf: All You Can Leet
JSConf: All You Can LeetJSConf: All You Can Leet
JSConf: All You Can Leet
 
Javascript Testing with Jasmine 101
Javascript Testing with Jasmine 101Javascript Testing with Jasmine 101
Javascript Testing with Jasmine 101
 
Test-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS ApplicationsTest-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS Applications
 
Unit testing with mocha
Unit testing with mochaUnit testing with mocha
Unit testing with mocha
 
Unit testing JavaScript using Mocha and Node
Unit testing JavaScript using Mocha and NodeUnit testing JavaScript using Mocha and Node
Unit testing JavaScript using Mocha and Node
 
Java script advance-auroskills (2)
Java script advance-auroskills (2)Java script advance-auroskills (2)
Java script advance-auroskills (2)
 
C++ Programming - 9th Study
C++ Programming - 9th StudyC++ Programming - 9th Study
C++ Programming - 9th Study
 
Jasmine - why JS tests don't smell fishy
Jasmine - why JS tests don't smell fishyJasmine - why JS tests don't smell fishy
Jasmine - why JS tests don't smell fishy
 
Testing JavaScript Applications
Testing JavaScript ApplicationsTesting JavaScript Applications
Testing JavaScript Applications
 
Mirror, mirror on the wall: Building a new PHP reflection library (DPC 2016)
Mirror, mirror on the wall: Building a new PHP reflection library (DPC 2016)Mirror, mirror on the wall: Building a new PHP reflection library (DPC 2016)
Mirror, mirror on the wall: Building a new PHP reflection library (DPC 2016)
 
QA for PHP projects
QA for PHP projectsQA for PHP projects
QA for PHP projects
 
Zero to SOLID
Zero to SOLIDZero to SOLID
Zero to SOLID
 
C++ Programming - 12th Study
C++ Programming - 12th StudyC++ Programming - 12th Study
C++ Programming - 12th Study
 
Factory Girl
Factory GirlFactory Girl
Factory Girl
 
AngularJS Unit Testing w/Karma and Jasmine
AngularJS Unit Testing w/Karma and JasmineAngularJS Unit Testing w/Karma and Jasmine
AngularJS Unit Testing w/Karma and Jasmine
 
Zen: Building Maintainable Catalyst Applications
Zen: Building Maintainable Catalyst ApplicationsZen: Building Maintainable Catalyst Applications
Zen: Building Maintainable Catalyst Applications
 
Testing JS with Jasmine
Testing JS with JasmineTesting JS with Jasmine
Testing JS with Jasmine
 
Workshop quality assurance for php projects - ZendCon 2013
Workshop quality assurance for php projects - ZendCon 2013Workshop quality assurance for php projects - ZendCon 2013
Workshop quality assurance for php projects - ZendCon 2013
 

Similar to Four Ways to add Features to Ext JS

SenchaCon 2010: Developing components and extensions for ext js
SenchaCon 2010: Developing components and extensions for ext jsSenchaCon 2010: Developing components and extensions for ext js
SenchaCon 2010: Developing components and extensions for ext jsMats Bryntse
 
JavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best PracticesJavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best PracticesSiarhei Barysiuk
 
Advance Java Programs skeleton
Advance Java Programs skeletonAdvance Java Programs skeleton
Advance Java Programs skeletonIram Ramrajkar
 
Ten useful JavaScript tips & best practices
Ten useful JavaScript tips & best practicesTen useful JavaScript tips & best practices
Ten useful JavaScript tips & best practicesAnkit Rastogi
 
[ShaderX5] 8 1 Postprocessing Effects In Design
[ShaderX5] 8 1 Postprocessing Effects In Design[ShaderX5] 8 1 Postprocessing Effects In Design
[ShaderX5] 8 1 Postprocessing Effects In Design종빈 오
 
Object-Oriented Javascript
Object-Oriented JavascriptObject-Oriented Javascript
Object-Oriented Javascriptkvangork
 
Object-Oriented JavaScript
Object-Oriented JavaScriptObject-Oriented JavaScript
Object-Oriented JavaScriptkvangork
 
RIA - Entwicklung mit Ext JS
RIA - Entwicklung mit Ext JSRIA - Entwicklung mit Ext JS
RIA - Entwicklung mit Ext JSDominik Jungowski
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript IntroductionDmitry Sheiko
 
Lenses and Prisms in Swift - Elviro Rocca - Codemotion Rome 2018
Lenses and Prisms in Swift - Elviro Rocca - Codemotion Rome 2018 Lenses and Prisms in Swift - Elviro Rocca - Codemotion Rome 2018
Lenses and Prisms in Swift - Elviro Rocca - Codemotion Rome 2018 Codemotion
 
Building Smart Async Functions For Mobile
Building Smart Async Functions For MobileBuilding Smart Async Functions For Mobile
Building Smart Async Functions For MobileGlan Thomas
 
What’s new in C# 6
What’s new in C# 6What’s new in C# 6
What’s new in C# 6Fiyaz Hasan
 
EPHPC Webinar Slides: Unit Testing by Arthur Purnama
EPHPC Webinar Slides: Unit Testing by Arthur PurnamaEPHPC Webinar Slides: Unit Testing by Arthur Purnama
EPHPC Webinar Slides: Unit Testing by Arthur PurnamaEnterprise PHP Center
 
Object Oriented Solved Practice Programs C++ Exams
Object Oriented Solved Practice Programs C++ ExamsObject Oriented Solved Practice Programs C++ Exams
Object Oriented Solved Practice Programs C++ ExamsMuhammadTalha436
 

Similar to Four Ways to add Features to Ext JS (20)

SenchaCon 2010: Developing components and extensions for ext js
SenchaCon 2010: Developing components and extensions for ext jsSenchaCon 2010: Developing components and extensions for ext js
SenchaCon 2010: Developing components and extensions for ext js
 
JavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best PracticesJavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best Practices
 
Spring hibernate jsf_primefaces_intergration
Spring hibernate jsf_primefaces_intergrationSpring hibernate jsf_primefaces_intergration
Spring hibernate jsf_primefaces_intergration
 
Advance Java Programs skeleton
Advance Java Programs skeletonAdvance Java Programs skeleton
Advance Java Programs skeleton
 
Unittests für Dummies
Unittests für DummiesUnittests für Dummies
Unittests für Dummies
 
Ten useful JavaScript tips & best practices
Ten useful JavaScript tips & best practicesTen useful JavaScript tips & best practices
Ten useful JavaScript tips & best practices
 
Javascript Design Patterns
Javascript Design PatternsJavascript Design Patterns
Javascript Design Patterns
 
[ShaderX5] 8 1 Postprocessing Effects In Design
[ShaderX5] 8 1 Postprocessing Effects In Design[ShaderX5] 8 1 Postprocessing Effects In Design
[ShaderX5] 8 1 Postprocessing Effects In Design
 
Maze
MazeMaze
Maze
 
Object-Oriented Javascript
Object-Oriented JavascriptObject-Oriented Javascript
Object-Oriented Javascript
 
Object-Oriented JavaScript
Object-Oriented JavaScriptObject-Oriented JavaScript
Object-Oriented JavaScript
 
RIA - Entwicklung mit Ext JS
RIA - Entwicklung mit Ext JSRIA - Entwicklung mit Ext JS
RIA - Entwicklung mit Ext JS
 
Twig tips and tricks
Twig tips and tricksTwig tips and tricks
Twig tips and tricks
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
 
Lenses and Prisms in Swift - Elviro Rocca - Codemotion Rome 2018
Lenses and Prisms in Swift - Elviro Rocca - Codemotion Rome 2018 Lenses and Prisms in Swift - Elviro Rocca - Codemotion Rome 2018
Lenses and Prisms in Swift - Elviro Rocca - Codemotion Rome 2018
 
Building Smart Async Functions For Mobile
Building Smart Async Functions For MobileBuilding Smart Async Functions For Mobile
Building Smart Async Functions For Mobile
 
What’s new in C# 6
What’s new in C# 6What’s new in C# 6
What’s new in C# 6
 
Unit testing
Unit testingUnit testing
Unit testing
 
EPHPC Webinar Slides: Unit Testing by Arthur Purnama
EPHPC Webinar Slides: Unit Testing by Arthur PurnamaEPHPC Webinar Slides: Unit Testing by Arthur Purnama
EPHPC Webinar Slides: Unit Testing by Arthur Purnama
 
Object Oriented Solved Practice Programs C++ Exams
Object Oriented Solved Practice Programs C++ ExamsObject Oriented Solved Practice Programs C++ Exams
Object Oriented Solved Practice Programs C++ Exams
 

Recently uploaded

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 

Recently uploaded (20)

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 

Four Ways to add Features to Ext JS

  • 1. Adding Features to Ext JS Get Ext JS to do your bidding
  • 2. Options ● Extend ● Override ● Plugin ● Sequence/Intercept
  • 3. Extending New component based on another Inherits functionality Somewhat lightweight (well come back to this) Four step process
  • 4. Basic Extending Pick a class to start from (well come back to this) CustomPanel = Ext.extend(Ext.Panel, { initComponent : function() { Ext.apply(this, { title: 'My Custom Panel' }); CustomPanel.superclass.initComponent.call(this); }, newMethod: function() {}, overriddenMethod: function() {} }); Ext.reg('custompanel', CustomPanel);
  • 5. Basic Extending Configure it with initComponent (well come back to this) CustomPanel = Ext.extend(Ext.Panel, { initComponent : function() { Ext.apply(this, { title: 'My Custom Panel' }); CustomPanel.superclass.initComponent.call(this); }, newMethod: function() {}, overriddenMethod: function() {} }); Ext.reg('custompanel', CustomPanel);
  • 6. Basic Extending Add your own methods (or override existing) CustomPanel = Ext.extend(Ext.Panel, { initComponent : function() { Ext.apply(this, { title: 'My Custom Panel' }); CustomPanel.superclass.initComponent.call(this); }, newMethod: function() {}, overriddenMethod: function() {} }); Ext.reg('custompanel', CustomPanel);
  • 7. Basic Extending Register it (for use as an xtype) CustomPanel = Ext.extend(Ext.Panel, { initComponent : function() { Ext.apply(this, { title: 'My Custom Panel' }); CustomPanel.superclass.initComponent.call(this); }, newMethod: function() {}, overriddenMethod: function() { CustomPanel.superclass.overriddenMethod.call(this); } }); Ext.reg('custompanel', CustomPanel);
  • 8. Basic Extending Party (like it's 1999) var myPanel = new CustomPanel({border: true}); ...items: [{ xtype: 'custompanel', border: true }]
  • 9. Extend From... Classes that only need events should extend Ext.util.Observable Classes that will serve as UI widgets should extend Ext.Component Use Ext.BoxComponent if simple layout management will be necessary Classes that can contain other components should extend Ext.Container Classes that require a title bar, toolbar or other advanced display features should extend Ext.Panel Look at the docs to see the inheritance chain for classes (upper right corner)
  • 11. How much overhead does extending add?
  • 12. Overhead Only as much code as you add CustomPanel = Ext.extend(Ext.Panel, { initComponent : function() { Ext.apply(this, { title: 'My Custom Panel' }); CustomPanel.superclass.initComponent.call(this); }, newMethod: function() {}, overriddenMethod: function() {} }); Ext.reg('custompanel', CustomPanel);
  • 13. Prototypical Inheritance Ugly word, great for memory usage
  • 14. Extending does not copy, it creates memory pointers. .constructor
  • 15. Override Overwrites existing library code Used to change base functionality or fix bugs Can be evil (don't let it become your crutch) Keep separate from the your code (ie: overrides.js)
  • 16. Basic Override // Class definition ExtClass = Ext.extend(Ext.Component, { existingMethod: function() {} overriddenMethod : function() {} }); // Our override Ext.override(ExtClass, { newMethod : function() {}, overriddenMethod : function() {} });
  • 17. Basic Override existingMethod remains newMethod is added (does not exist yet) overriddenMethod is completely replaced (exists already) // Class definition ExtClass = Ext.extend(Ext.Component, { existingMethod: function() {} overriddenMethod : function() {} }); Ext.override(MyClass, { newMethod : function() {}, overriddenMethod : function() {} });
  • 18. Plugins Adds functionality to various classes Can be used on any class that inherits from Ext.Component Independent of base class (more on this later)
  • 19. Basic Plugin Extend a base class (usually a simple one) Ext.ux.PluginName = Ext.extend(Ext.util.Observable, { constructor: function(config){ Ext.apply(this,config); Ext.ux.PluginName.superclass.constructor.call(this, config); }, init: function(cmp){ // do stuff } }); Ext.preg('plugin-name',Ext.ux.PluginName);
  • 20. Basic Plugin Process any plugin configuration (can be omitted) Ext.ux.PluginName = Ext.extend(Ext.util.Observable, { constructor: function(config){ Ext.apply(this,config); Ext.ux.PluginName.superclass.constructor.call(this, config); }, init: function(cmp){ // do stuff } }); Ext.preg('plugin-name',Ext.ux.PluginName);
  • 21. Basic Plugin Do stuff on host class initialization Ext.ux.PluginName = Ext.extend(Ext.util.Observable, { constructor: function(config){ Ext.apply(this,config); Ext.ux.PluginName.superclass.constructor.call(this, config); }, init: function(cmp){ // do stuff } }); Ext.preg('plugin-name',Ext.ux.PluginName);
  • 22. Basic Plugin Register the plugin Ext.ux.PluginName = Ext.extend(Ext.util.Observable, { constructor: function(config){ Ext.apply(this,config); Ext.ux.PluginName.superclass.constructor.call(this, config); }, init: function(cmp){ // do stuff } }); Ext.preg('plugin-name',Ext.ux.PluginName);
  • 23. We Have a Plugin Party (like it's 1999) again ...items: [{ xtype: 'custompanel', border: true, plugins: [{ ptype: 'plugin-name', isAwesome: false }] }]
  • 24. Not awesome yet? (lets make it awesome)
  • 25. Awesome Plugin The magic happens here init: function(cmp){ this.hostCmp = cmp cmp.setTitle('Awesome'); } init is called just after initComponent but before render
  • 26. Sequence/Intercept Piggyback on existing functions Useful for small changes/features Be aware of impact
  • 27. Basic Sequence/Intercept Intercept happens before Sequence happens after
  • 28. Basic Sequence/Intercept Class and method to sequence or intercept Ext.intercept(Ext.form.Field.prototype, 'initComponent', function() { var fl = this.fieldLabel, ab = this.allowBlank; if (ab === false && fl) { this.fieldLabel = '<span style="color:red;">*</span> '+fl; } else if (ab === true && fl) { this.fieldLabel = ' '+fl; } });
  • 29. Basic Sequence/Intercept Scope and arguments remain the same Ext.intercept(Ext.form.Field.prototype, 'initComponent', function() { var fl = this.fieldLabel, ab = this.allowBlank; if (ab === false && fl) { this.fieldLabel = '<span style="color:red;">*</span> '+fl; } else if (ab === true && fl) { this.fieldLabel = ' '+fl; } });
  • 30. Basic Sequence/Intercept ... { fieldLabel: 'Last Name', allowBlank: false, name: 'last' },{ß fieldLabel: 'Company', allowBlank: true, name: 'company' } ...