This document provides guidance on developing extensions for Ext JS. It begins with an introduction and agenda. It then discusses what an Ext JS extension is, and the differences between extensions, overrides, and plugins. Examples are provided of each. The document walks through creating a simple clock extension, covering key steps like choosing a base class, creating class stubs, rendering elements, handling resize events, and cleanup. Best practices for extensions are outlined at the end.
On real examples, I’ll explain how we can interpret imperatively written code into “Graph of dependencies” and then convert it to declarative FRP style. It’s not only about the “states”. It’s about sequences of operations also. I’ll introduce some patterns of asynchronous programming like Future and Stream (aka Signal) and explain how effectively they may work.
XNA coding series.
Exercise 1:
Hello World in XNA.
Exercise 2:
Draw 2d image.
Exercise 3:
Using Keyboard and Mouse in a PC game.
Exercise 4:
Crating a Menu system in a PC game.
Exercise 5:
Play MP3 in XNA.
On real examples, I’ll explain how we can interpret imperatively written code into “Graph of dependencies” and then convert it to declarative FRP style. It’s not only about the “states”. It’s about sequences of operations also. I’ll introduce some patterns of asynchronous programming like Future and Stream (aka Signal) and explain how effectively they may work.
XNA coding series.
Exercise 1:
Hello World in XNA.
Exercise 2:
Draw 2d image.
Exercise 3:
Using Keyboard and Mouse in a PC game.
Exercise 4:
Crating a Menu system in a PC game.
Exercise 5:
Play MP3 in XNA.
One of the great benefits of developing in Ext JS is its clean extensibility. This lets you create reusable components easily that other developers can simply drop into their own applications with minimal effort. In this session, you'll learn how to create a re-usable component for Ext JS, and I'll describe my own experience creating Ext Scheduler - the scheduling component for Ext JS.
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...Sencha
At Ubisoft Technology Group, we've created a platform for video game production to share game assets, in-game footage, and animations across the entire company. Ease of search and good UX were incredibly important for an audience of artists and creative types. This is where the Web and a powerful JavaScript framework came in; we chose Ext JS for its robustness and scalability. In this session, we'll showcase two different applications and dive into the technical aspects of designing the UI for a faceted search based on Elasticsearch.
SenchaCon 2016: Modernizing the Ext JS Class System - Don GriffinSencha
JavaScript is advancing and ES2015 (formerly ES6) is the foundation of its future. Sencha is committed to delivering cutting-edge technology for your applications, and supporting the evolution of JavaScript is a central part of that commitment. The expansive feature set of ES2015 formally enables coding paradigms: modules to better organize your code, classes to cleanly declare reusable units of functionality, and so much more. See how Ext JS is embracing these new language and toolset features, and how they will expand your development horizons.
Sencha Roadshow 2017: Modernizing the Ext JS Class System and ToolingSencha
JavaScript is advancing and ES2015 (formerly ES6) is the foundation of its future. Sencha is committed to delivering cutting-edge technology for your applications, and supporting the evolution of JavaScript is a central part of that commitment. The expansive feature set of ES2015 formally enables coding paradigms: modules to better organize your code, classes to cleanly declare reusable units of functionality, and so much more. In this session, you'll see how Ext JS is embracing these new language and toolset features, and how they will expand your development horizons.
This presentation is about a basic Overview of Ext JS framework. Covers the discussion on topics like Understanding Ext JS API, Ext JS component Life cycle,Ext JS Components and Events and Ext JS Layouts etc.
Java programming presentations By Daroko blog
Do not just read java as a programmer, find projects and start making some Money, at DAROKO BLOG,WE Guide you through what you have learned in the classroom to a real business Environment, find java applications to a real business Environment, find also all IT Solutions and How you can apply them, find the best companies where you can get the IT jobs worldwide, Find java contract, Complete and start making some cash, find clients within your Country, refer and get paid when you complete the work.
Not Just a contact, at daroko Blog (www.professionalbloggertricks.com/),you are also being taught how you can apply all IT related field in real world.
Simply Google, Daroko Blog or visit (www.professionalbloggertricks.com/) to Know More about all these service now.
Do not just learn and go, apply them in real world.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
More Related Content
Similar to SenchaCon 2010: Developing components and extensions for ext js
One of the great benefits of developing in Ext JS is its clean extensibility. This lets you create reusable components easily that other developers can simply drop into their own applications with minimal effort. In this session, you'll learn how to create a re-usable component for Ext JS, and I'll describe my own experience creating Ext Scheduler - the scheduling component for Ext JS.
SenchaCon 2016: Building a Faceted Catalog of Video Game Assets Using Ext JS ...Sencha
At Ubisoft Technology Group, we've created a platform for video game production to share game assets, in-game footage, and animations across the entire company. Ease of search and good UX were incredibly important for an audience of artists and creative types. This is where the Web and a powerful JavaScript framework came in; we chose Ext JS for its robustness and scalability. In this session, we'll showcase two different applications and dive into the technical aspects of designing the UI for a faceted search based on Elasticsearch.
SenchaCon 2016: Modernizing the Ext JS Class System - Don GriffinSencha
JavaScript is advancing and ES2015 (formerly ES6) is the foundation of its future. Sencha is committed to delivering cutting-edge technology for your applications, and supporting the evolution of JavaScript is a central part of that commitment. The expansive feature set of ES2015 formally enables coding paradigms: modules to better organize your code, classes to cleanly declare reusable units of functionality, and so much more. See how Ext JS is embracing these new language and toolset features, and how they will expand your development horizons.
Sencha Roadshow 2017: Modernizing the Ext JS Class System and ToolingSencha
JavaScript is advancing and ES2015 (formerly ES6) is the foundation of its future. Sencha is committed to delivering cutting-edge technology for your applications, and supporting the evolution of JavaScript is a central part of that commitment. The expansive feature set of ES2015 formally enables coding paradigms: modules to better organize your code, classes to cleanly declare reusable units of functionality, and so much more. In this session, you'll see how Ext JS is embracing these new language and toolset features, and how they will expand your development horizons.
This presentation is about a basic Overview of Ext JS framework. Covers the discussion on topics like Understanding Ext JS API, Ext JS component Life cycle,Ext JS Components and Events and Ext JS Layouts etc.
Java programming presentations By Daroko blog
Do not just read java as a programmer, find projects and start making some Money, at DAROKO BLOG,WE Guide you through what you have learned in the classroom to a real business Environment, find java applications to a real business Environment, find also all IT Solutions and How you can apply them, find the best companies where you can get the IT jobs worldwide, Find java contract, Complete and start making some cash, find clients within your Country, refer and get paid when you complete the work.
Not Just a contact, at daroko Blog (www.professionalbloggertricks.com/),you are also being taught how you can apply all IT related field in real world.
Simply Google, Daroko Blog or visit (www.professionalbloggertricks.com/) to Know More about all these service now.
Do not just learn and go, apply them in real world.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024Neo4j
Neha Bajwa, Vice President of Product Marketing, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
A tale of scale & speed: How the US Navy is enabling software delivery from l...sonjaschweigert1
Rapid and secure feature delivery is a goal across every application team and every branch of the DoD. The Navy’s DevSecOps platform, Party Barge, has achieved:
- Reduction in onboarding time from 5 weeks to 1 day
- Improved developer experience and productivity through actionable findings and reduction of false positives
- Maintenance of superior security standards and inherent policy enforcement with Authorization to Operate (ATO)
Development teams can ship efficiently and ensure applications are cyber ready for Navy Authorizing Officials (AOs). In this webinar, Sigma Defense and Anchore will give attendees a look behind the scenes and demo secure pipeline automation and security artifacts that speed up application ATO and time to production.
We will cover:
- How to remove silos in DevSecOps
- How to build efficient development pipeline roles and component templates
- How to deliver security artifacts that matter for ATO’s (SBOMs, vulnerability reports, and policy evidence)
- How to streamline operations with automated policy checks on container images
Dr. Sean Tan, Head of Data Science, Changi Airport Group
Discover how Changi Airport Group (CAG) leverages graph technologies and generative AI to revolutionize their search capabilities. This session delves into the unique search needs of CAG’s diverse passengers and customers, showcasing how graph data structures enhance the accuracy and relevance of AI-generated search results, mitigating the risk of “hallucinations” and improving the overall customer journey.
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
Threats to mobile devices are more prevalent and increasing in scope and complexity. Users of mobile devices desire to take full advantage of the features
available on those devices, but many of the features provide convenience and capability but sacrifice security. This best practices guide outlines steps the users can take to better protect personal devices and information.
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...SOFTTECHHUB
The choice of an operating system plays a pivotal role in shaping our computing experience. For decades, Microsoft's Windows has dominated the market, offering a familiar and widely adopted platform for personal and professional use. However, as technological advancements continue to push the boundaries of innovation, alternative operating systems have emerged, challenging the status quo and offering users a fresh perspective on computing.
One such alternative that has garnered significant attention and acclaim is Nitrux Linux 3.5.0, a sleek, powerful, and user-friendly Linux distribution that promises to redefine the way we interact with our devices. With its focus on performance, security, and customization, Nitrux Linux presents a compelling case for those seeking to break free from the constraints of proprietary software and embrace the freedom and flexibility of open-source computing.
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfPeter Spielvogel
Building better applications for business users with SAP Fiori.
• What is SAP Fiori and why it matters to you
• How a better user experience drives measurable business benefits
• How to get started with SAP Fiori today
• How SAP Fiori elements accelerates application development
• How SAP Build Code includes SAP Fiori tools and other generative artificial intelligence capabilities
• How SAP Fiori paves the way for using AI in SAP apps
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
2. About me
{
name : ”Mats Bryntse”,
extForumAlias: ’mankz’,
age : 33,
from: ”Helsingborg, Sweden”,
usingExtSince : 2007,
creatorOf: [”Ext Scheduler”, ”Ext Gantt”],
twitter : ”@extscheduler”
}
3. Agenda
* What is an Ext extension?
* Extension vs override vs plugin.
* Solve a simple silly problem in 3 ways
* Create a clock plugin, Ext.ux.Clock
* 10 Do’s and Dont’s when creating a
UX
4. What is an Ext JS
extension?
An extension is a reusable component,
normally derived from an existing Ext JS class.
Let’s look at some popular community
extensions.
5. Some popular community
extensions
// By Saki
Ext.ux.form.LovCombo = Ext.extend(Ext.form.ComboBox, {
});
// By MindPatterns
Ext.ux.grid.livegrid.GridPanel =
Ext.extend(Ext.grid.GridPanel, { });
// By Condor
Ext.ux.data.PagingStore = Ext.extend(Ext.data.Store, { });
Extensions don’t have to involve UI.
6. Terminology
* Extension : Create a new class with added
or modified behavior
* Override : Globally alter the behavior of an
existing class (useful for patching etc).
* Plugin : Augment and add behavior to an
Ext.Component instance (but not tied to a class)
8. Client is always right
3 ways of solving this ”real world
problem”:
* Create an extension (a new class)
* Override Ext.Button globally
* Create a plugin
9. Let’s create a simple
extension!
Using Ext.Button as the base class
seems reasonable.
First let’s take a look at Ext.extend
14. Let’s do the same with an
override
// Will affect all Buttons globally
Ext.override(Ext.Button, {
onClick :
Ext.Button.prototype.onClick.createSequence(function(){
this.el.puff();
})
});
new Ext.Button ({width : 130, text: "Override Puff", renderTo :
Ext.getBody()});
15. Ext.override review
* We used Ext.override to alter the
behavior of an existing class.
* Any instances created before or after
our override are affected.
16. Last step, let’s do the
same with a plugin
A plugin is any type of object that has
an init method.
var myPlugin = {
init : function(cmp) {
alert(’Hello world’);
}
};
17. Let’s do the same with a
plugin
Puffable = function() {
this.init = function(cmp) {
cmp.on("afterrender", function() {
this.el.on("click", this.el.puff, this.el);
});
};
};
// Augment a button
new Ext.Button ({text: "Plugin Puff", renderTo : Ext.getBody(),
plugins : new Puffable() });
// Augment a Panel
new Ext.Panel({ height : 300, width: 300, title : "Puff Plugin",
renderTo : Ext.getBody(), plugins : new Puffable()});
18. Plugin review
We used the plugin concept to add
functionality to a single instance of an
existing class.
Note: The plugin itself is not tied to a
specific class (though will only work on
an Ext.Component)
19. Let’s create something
useful instead
Goal: Create an analog clock extension.
We’ll use Raphael to visualize the clock
hands
Download the source from the Ext forums:
http://www.sencha.com/forum/showthread.php?115907
20. Step 1 – Choose a
suitable base class
* We want to be able to use the clock inside a
Panel or Window etc. => Ext.Component.
* We want the clock to be able to have any size
=> Ext.BoxComponent
* We don’t really need support for toolbars,
headers, buttons etc. => Ext.Panel.
21. Introduction to
Ext.BoxComponent
* Base class of most UI widgets in Ext JS
(GridPanel, TabPanel, TextField etc...)
* Base class for any Component that is to
be sized as a box, using width and height.
22. Ext.Component Life
Cycle & Template
Methods
* Initialization (constructor, initComponent)
- Configuration, setup etc...
* Rendering (onRender, afterRender)
- Add additional elements and styling here
* Destruction (onDestroy)
- Clean up after yourself, destroy elements etc.
25. Step 4 – Create simple
example HTML page
<html>
<head>
<!--Ext lib and UX components-->
...
<script type="text/javascript">
Ext.onReady(function(){
var clock = new Ext.ux.Clock({
height:150,
width:150
});
clock.render(Ext.getBody());
});
</script>
</head>
index.html
26. Step 5 – Create elements
afterRender : function() { // The component is now rendered and has an ’el’
var size = Math.min(this.getHeight(), this.getWidth());
// Background image of an empty clock with no hands
this.bgEl = this.el.createChild({
tag : 'img',
cls : 'ext-ux-clock-img',
src : this.clockBgUrl,
width : size,
height : size
});
// Initialize a Raphael canvas for drawing the hands
this.canvas = Raphael(this.el.dom, size, size);
this.drawHands();
this.on('resize', this.handleResize, this);
this.timer = setInterval(this.drawHands.createDelegate(this), 1000);
Ext.ux.Clock.superclass.afterRender.apply(this, arguments);
}
27. Step 6 – Draw hands
drawHands : function() {
var size = Math.min(this.getHeight(), this.getWidth())
date = new Date(),
secs = date.getSeconds(),
mins = date.getMinutes(),
hrs = date.getHours(),
canvas = this.canvas;
canvas.clear();
canvas.path(...); // Draw minute hand
canvas.path(...); // Draw hour hand
canvas.path(...); // Draw second hand
}
36. 10 Do’s and Don’ts when
creating an Ext extension
Here is a list of some things to think
about when creating your extension.
10
37. ?Why?
! Other developers will have a better chance of
understanding (and maintaining) your code.
Additionally, the Ext JS source contains lots of
best practices.
1. Follow Ext JS coding
patterns
38. var w = 100;
var h = 40;
var s = 0;
if (doCalculate)
s = w * h;
var width = 100,
height = 40,
area = 0;
if (doCalculate) {
area = width *
height;
}
1. Follow Ext JS coding
patterns
39. 2. Design classes for
configurability
?Why?
! It will allow your class to be easily configured
without the use of huge overrides. This concept is
seen throughout all of Ext JS.
41. 3. Make key functionality
easily overridable
?Why?
! It will allow your class to be easily altered
without the use of huge overrides. This concept is
seen throughout all of Ext JS.
42. initComponent : function(){
this.tpl = new Ext.XTemplate(
”<div>{foo}</div>”
);
// ....
}
3. Make key functionality
easily overridable
initComponent : function(){
if (!this.tpl) {
this.tpl = new Ext.XTemplate(
'<div>{foo}</div>”
);
}
// ....
}
44. MyClass = Ext.extend(Ext.Toolbar, {
constructor: function() {
this.add({
text : 'No data to display’
});
....
});
4. Make classes
localizable
MyClass = Ext.extend(Ext.Toolbar, {
noDataText : 'No data to display’,
constructor: function() {
this.add({
text : this.noDataText
});
});
});
45. 5. Use a syntax checker
?Why?
! Helps you find global variable leaks, extra
commas etc. Use JsLint or JavaScriptLint
(beware, JsLint WILL hurt your feelings).
46. ?Why?
! Because noone likes memory leaks. Override
the onDestroy method to clean up any additional
elements, event listeners etc...
6. Clean up after yourself
50. ?Why?
! Because other developers will likely read your
code. By using the JSDoc syntax you can
generate beautiful documentation looking like the
Ext online API (using Ext-Doc).
8. Document your
extension
52. ?Why?
!Noone likes bugs. Some examples:
* What happens if you include multiple instances
of your extension?
* What happens when it’s destroyed? Any leaked
DOM nodes etc?
9. Test edge cases
53. ?Why?
! You might not care, but everyone that wants to
use your extension in a production environment
will (should) care.
10. Include a license