SlideShare a Scribd company logo
your European technology advisoryour European
technology advis
Why ExtJS: Class system
Sencha ExtJs 6
• Ext JS applications follow a unified directory structure that is the
same for every app.
File structure
• app folder contains application javascript and sass sources
• classic and modern folders contain javascript and sass
sources specific for the toolkit
• overrides could contain custom overrides to framework
classes
• resources contains application assets
• sass folder is for application sass sources (if not defined
inside app)
• packages contain extra packages that the application can use
• ext folder contains the framework sources
• build folder is generated by the Sencha CMD build process
• ExtJs is a full object oriented framework
• The class-based programming style is obtained with consistent
naming conventions for classes, namespaces and filenames
• Naming Conventions
• Classes

Top-level namespace + 0..n packages names + Actual Class

MyApp.view.main.Main

MyApp.model.User

MyApp.Application
• Sources

The names of the classes map the file paths. There must only
be one class per file.

MyApp.view.main.Main > /app/view/main/Main.js

MyApp.model.User > /app/model/User.js
Class system
Class Declaration
• The core of ExtJs architecture is the MVVM paradigm
• Thanks to MVVM ExtJs is able to perform a two-way data binding
between data and views, other than offers a simple and performant
way to write business logic
Model View View-Model (MVVM)
View Model
Model View
Methods & Events
Data
Two-way Data Binding
View
Controller
Methods Events
Demo
Sencha ExtJs 6
your European
technology advisor
indirizzo
Via Santa Maria Valle 3, 20123
Milano Italia
Gildeweg 39A 4383 NJ
Vlissingen Nederland
Goeman Borgesiuslaan 77
3515 ET Utrecht Nederland
telefono
+39 02 00681 028
email
marketing@ibuildings.it
support@ibuildings.it
your European
technology advisor

More Related Content

What's hot

Overview Of Medicor
Overview Of MedicorOverview Of Medicor
Overview Of Medicor
guest43b3e13
 
Acyclic grapch directory 56(2)
Acyclic grapch directory 56(2)Acyclic grapch directory 56(2)
Acyclic grapch directory 56(2)
myrajendra
 

What's hot (11)

How to access databases
How to access databasesHow to access databases
How to access databases
 
Types of no sql databases
Types of no sql databasesTypes of no sql databases
Types of no sql databases
 
Overview Of Medicor
Overview Of MedicorOverview Of Medicor
Overview Of Medicor
 
Reference Management Systems for Research Support
Reference Management Systems for Research SupportReference Management Systems for Research Support
Reference Management Systems for Research Support
 
Eds intro
Eds introEds intro
Eds intro
 
Eds intro
Eds introEds intro
Eds intro
 
Sagar presentation
Sagar presentationSagar presentation
Sagar presentation
 
New Technology Tools to Enhance Research - Preparing a Review of the Literature
New Technology Tools to Enhance Research - Preparing a Review of the LiteratureNew Technology Tools to Enhance Research - Preparing a Review of the Literature
New Technology Tools to Enhance Research - Preparing a Review of the Literature
 
Acyclic grapch directory 56(2)
Acyclic grapch directory 56(2)Acyclic grapch directory 56(2)
Acyclic grapch directory 56(2)
 
Dynamic websites
Dynamic websitesDynamic websites
Dynamic websites
 
advance theme development
advance theme developmentadvance theme development
advance theme development
 

Similar to ExtJS: La piattaforma vincente (class system)

chap 10 : Development (scjp/ocjp)
chap 10 : Development (scjp/ocjp)chap 10 : Development (scjp/ocjp)
chap 10 : Development (scjp/ocjp)
It Academy
 

Similar to ExtJS: La piattaforma vincente (class system) (20)

Asp folders and web configurations
Asp folders and web configurationsAsp folders and web configurations
Asp folders and web configurations
 
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
 
GTU Asp.net Project Training Guidelines
GTU Asp.net Project Training GuidelinesGTU Asp.net Project Training Guidelines
GTU Asp.net Project Training Guidelines
 
Anatomy of android aplication
Anatomy of android aplicationAnatomy of android aplication
Anatomy of android aplication
 
Directory Structure Changes in Laravel 5.3
Directory Structure Changes in Laravel 5.3Directory Structure Changes in Laravel 5.3
Directory Structure Changes in Laravel 5.3
 
chap 10 : Development (scjp/ocjp)
chap 10 : Development (scjp/ocjp)chap 10 : Development (scjp/ocjp)
chap 10 : Development (scjp/ocjp)
 
9 cm604.26
9 cm604.269 cm604.26
9 cm604.26
 
20.Namespaces
20.Namespaces20.Namespaces
20.Namespaces
 
Asp .net folders and web.config
Asp .net folders and web.configAsp .net folders and web.config
Asp .net folders and web.config
 
Presentation 1.pptx
Presentation 1.pptxPresentation 1.pptx
Presentation 1.pptx
 
Asp .net folders and web.config
Asp .net folders and web.configAsp .net folders and web.config
Asp .net folders and web.config
 
Building Rich Internet Applications with Ext JS
Building Rich Internet Applications  with Ext JSBuilding Rich Internet Applications  with Ext JS
Building Rich Internet Applications with Ext JS
 
Android project architecture
Android project architectureAndroid project architecture
Android project architecture
 
Presentation of Apache Cassandra
Presentation of Apache Cassandra Presentation of Apache Cassandra
Presentation of Apache Cassandra
 
Apache maven and its impact on java 9 (Java One 2017)
Apache maven and its impact on java 9 (Java One 2017)Apache maven and its impact on java 9 (Java One 2017)
Apache maven and its impact on java 9 (Java One 2017)
 
CNIT 152 13 Investigating Mac OS X Systems
CNIT 152 13 Investigating Mac OS X SystemsCNIT 152 13 Investigating Mac OS X Systems
CNIT 152 13 Investigating Mac OS X Systems
 
[DanNotes] XPages - Beyound the Basics
[DanNotes] XPages - Beyound the Basics[DanNotes] XPages - Beyound the Basics
[DanNotes] XPages - Beyound the Basics
 
Introduction to DSpace
Introduction to DSpaceIntroduction to DSpace
Introduction to DSpace
 
Apereo OAE - Bootcamp
Apereo OAE - BootcampApereo OAE - Bootcamp
Apereo OAE - Bootcamp
 
Introduction to Monsoon PHP framework
Introduction to Monsoon PHP frameworkIntroduction to Monsoon PHP framework
Introduction to Monsoon PHP framework
 

More from Eugenio Minardi

More from Eugenio Minardi (20)

Delphi and ExtJS (26 ottobre 2017)
Delphi and ExtJS (26 ottobre 2017)Delphi and ExtJS (26 ottobre 2017)
Delphi and ExtJS (26 ottobre 2017)
 
ExtJS: La piattaforma vincente (tools)
ExtJS: La piattaforma vincente (tools)ExtJS: La piattaforma vincente (tools)
ExtJS: La piattaforma vincente (tools)
 
ExtJS: La piattaforma vincente (multiple screens)
ExtJS: La piattaforma vincente (multiple screens)ExtJS: La piattaforma vincente (multiple screens)
ExtJS: La piattaforma vincente (multiple screens)
 
ExtJS: La piattaforma vincente (rich UI)
ExtJS: La piattaforma vincente (rich UI)ExtJS: La piattaforma vincente (rich UI)
ExtJS: La piattaforma vincente (rich UI)
 
ExtJS: La piattaforma vincente
ExtJS: La piattaforma vincenteExtJS: La piattaforma vincente
ExtJS: La piattaforma vincente
 
Distributed Team Management: 
Pitfall, Challenges and Advantages
Distributed Team Management: 
Pitfall, Challenges and AdvantagesDistributed Team Management: 
Pitfall, Challenges and Advantages
Distributed Team Management: 
Pitfall, Challenges and Advantages
 
A Practical Introduction to Symfony (European Drupal Days 2015)
A Practical Introduction to Symfony (European Drupal Days 2015)A Practical Introduction to Symfony (European Drupal Days 2015)
A Practical Introduction to Symfony (European Drupal Days 2015)
 
UN World Food Programme Standards & Best Practises (European Drupal Days 2015)
UN World Food Programme Standards & Best Practises (European Drupal Days 2015)UN World Food Programme Standards & Best Practises (European Drupal Days 2015)
UN World Food Programme Standards & Best Practises (European Drupal Days 2015)
 
Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)
 
Optimizing MariaDB for Web Applications (European Drupal Days 2015)
Optimizing MariaDB for Web Applications (European Drupal Days 2015)Optimizing MariaDB for Web Applications (European Drupal Days 2015)
Optimizing MariaDB for Web Applications (European Drupal Days 2015)
 
PhpStorm for Drupal Development (European Drupal Days 2015)
PhpStorm for Drupal Development (European Drupal Days 2015)PhpStorm for Drupal Development (European Drupal Days 2015)
PhpStorm for Drupal Development (European Drupal Days 2015)
 
Drupal Continuous Integration (European Drupal Days 2015)
Drupal Continuous Integration (European Drupal Days 2015)Drupal Continuous Integration (European Drupal Days 2015)
Drupal Continuous Integration (European Drupal Days 2015)
 
Deploying an Open Source DAM in SAAS Mode (European Drupal Days 2015)
Deploying an Open Source DAM in SAAS Mode (European Drupal Days 2015)Deploying an Open Source DAM in SAAS Mode (European Drupal Days 2015)
Deploying an Open Source DAM in SAAS Mode (European Drupal Days 2015)
 
The multilingual Drupal 8 experience (European Drupal Days 2015)
The multilingual Drupal 8 experience (European Drupal Days 2015)The multilingual Drupal 8 experience (European Drupal Days 2015)
The multilingual Drupal 8 experience (European Drupal Days 2015)
 
Another Copernican Revolution: maintenance first, projects second (European D...
Another Copernican Revolution: maintenance first, projects second (European D...Another Copernican Revolution: maintenance first, projects second (European D...
Another Copernican Revolution: maintenance first, projects second (European D...
 
Drupal Security: How to survive Drupalgeddon and prepare for future (European...
Drupal Security: How to survive Drupalgeddon and prepare for future (European...Drupal Security: How to survive Drupalgeddon and prepare for future (European...
Drupal Security: How to survive Drupalgeddon and prepare for future (European...
 
The benefits of an elastic infrastructure on a Drupal e-commerce (European Dr...
The benefits of an elastic infrastructure on a Drupal e-commerce (European Dr...The benefits of an elastic infrastructure on a Drupal e-commerce (European Dr...
The benefits of an elastic infrastructure on a Drupal e-commerce (European Dr...
 
Verifying Drupal modules with OWASP ASVS 2014 (European Drupal Days 2015)
Verifying Drupal modules with OWASP ASVS 2014 (European Drupal Days 2015)Verifying Drupal modules with OWASP ASVS 2014 (European Drupal Days 2015)
Verifying Drupal modules with OWASP ASVS 2014 (European Drupal Days 2015)
 
Secure Drupal, from start to finish (European Drupal Days 2015)
Secure Drupal, from start to finish (European Drupal Days 2015)Secure Drupal, from start to finish (European Drupal Days 2015)
Secure Drupal, from start to finish (European Drupal Days 2015)
 
Bridging the gap between business and technology - Behaviour Driven Developme...
Bridging the gap between business and technology - Behaviour Driven Developme...Bridging the gap between business and technology - Behaviour Driven Developme...
Bridging the gap between business and technology - Behaviour Driven Developme...
 

Recently uploaded

Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 

Recently uploaded (20)

Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
Transforming The New York Times: Empowering Evolution through UX
Transforming The New York Times: Empowering Evolution through UXTransforming The New York Times: Empowering Evolution through UX
Transforming The New York Times: Empowering Evolution through UX
 
Enterprise Security Monitoring, And Log Management.
Enterprise Security Monitoring, And Log Management.Enterprise Security Monitoring, And Log Management.
Enterprise Security Monitoring, And Log Management.
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Server-Driven User Interface (SDUI) at Priceline
Server-Driven User Interface (SDUI) at PricelineServer-Driven User Interface (SDUI) at Priceline
Server-Driven User Interface (SDUI) at Priceline
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
The architecture of Generative AI for enterprises.pdf
The architecture of Generative AI for enterprises.pdfThe architecture of Generative AI for enterprises.pdf
The architecture of Generative AI for enterprises.pdf
 

ExtJS: La piattaforma vincente (class system)

  • 1. your European technology advisoryour European technology advis
  • 2. Why ExtJS: Class system Sencha ExtJs 6
  • 3. • Ext JS applications follow a unified directory structure that is the same for every app. File structure • app folder contains application javascript and sass sources • classic and modern folders contain javascript and sass sources specific for the toolkit • overrides could contain custom overrides to framework classes • resources contains application assets • sass folder is for application sass sources (if not defined inside app) • packages contain extra packages that the application can use • ext folder contains the framework sources • build folder is generated by the Sencha CMD build process
  • 4. • ExtJs is a full object oriented framework • The class-based programming style is obtained with consistent naming conventions for classes, namespaces and filenames • Naming Conventions • Classes
 Top-level namespace + 0..n packages names + Actual Class
 MyApp.view.main.Main
 MyApp.model.User
 MyApp.Application • Sources
 The names of the classes map the file paths. There must only be one class per file.
 MyApp.view.main.Main > /app/view/main/Main.js
 MyApp.model.User > /app/model/User.js Class system
  • 6. • The core of ExtJs architecture is the MVVM paradigm • Thanks to MVVM ExtJs is able to perform a two-way data binding between data and views, other than offers a simple and performant way to write business logic Model View View-Model (MVVM) View Model Model View Methods & Events Data Two-way Data Binding View Controller Methods Events
  • 8.
  • 9. your European technology advisor indirizzo Via Santa Maria Valle 3, 20123 Milano Italia Gildeweg 39A 4383 NJ Vlissingen Nederland Goeman Borgesiuslaan 77 3515 ET Utrecht Nederland telefono +39 02 00681 028 email marketing@ibuildings.it support@ibuildings.it your European technology advisor