SlideShare a Scribd company logo
Mats Bryntse, CEO @ Bryntum
Creating Reusable UI Components with Ext JS
@Bryntum
Intro | Content
Ext JS basics Class choices Error monitoring
• Ext JS class system
• Extending a class
• Component model
• Life cycle, constructor,
destructor
• Choose base class
• Architecture
• Mixins, plugins
• Writing testable code
• How to detect bugs in
production
• Recording session video
• RootCause
Basics | Background
One of the great strengths of Ext JS:
Mature reusable UI components.
Basics | Background
Basics | Background
Basics | Background
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Sencha RAD Mix Tokyo

More Related Content

More from Embarcadero Technologies

「コンポーネント/アプリケーション開発分離の重要性 ― VCL/FMXとExt JSの類似点の考察から見るその効果」
「コンポーネント/アプリケーション開発分離の重要性 ― VCL/FMXとExt JSの類似点の考察から見るその効果」「コンポーネント/アプリケーション開発分離の重要性 ― VCL/FMXとExt JSの類似点の考察から見るその効果」
「コンポーネント/アプリケーション開発分離の重要性 ― VCL/FMXとExt JSの類似点の考察から見るその効果」
Embarcadero Technologies
 
「マルチデバイスなDelphiで活かすWebアプリケーション」
「マルチデバイスなDelphiで活かすWebアプリケーション」「マルチデバイスなDelphiで活かすWebアプリケーション」
「マルチデバイスなDelphiで活かすWebアプリケーション」
Embarcadero Technologies
 
「開発の現場でも役に立つボトムアップによるデータモデリング活用実例」
「開発の現場でも役に立つボトムアップによるデータモデリング活用実例」「開発の現場でも役に立つボトムアップによるデータモデリング活用実例」
「開発の現場でも役に立つボトムアップによるデータモデリング活用実例」
Embarcadero Technologies
 
「SenchaユーザーのためのRAD Studio入門」
「SenchaユーザーのためのRAD Studio入門」「SenchaユーザーのためのRAD Studio入門」
「SenchaユーザーのためのRAD Studio入門」
Embarcadero Technologies
 
「Delphi/C++BuilderユーザーのためのSencha入門」
「Delphi/C++BuilderユーザーのためのSencha入門」「Delphi/C++BuilderユーザーのためのSencha入門」
「Delphi/C++BuilderユーザーのためのSencha入門」
Embarcadero Technologies
 
「Delphiマイグレーションの現状」
「Delphiマイグレーションの現状」「Delphiマイグレーションの現状」
「Delphiマイグレーションの現状」
Embarcadero Technologies
 
「エンタープライズシステムの開発におけるSIerから見たSenchaの有効性」
「エンタープライズシステムの開発におけるSIerから見たSenchaの有効性」「エンタープライズシステムの開発におけるSIerから見たSenchaの有効性」
「エンタープライズシステムの開発におけるSIerから見たSenchaの有効性」
Embarcadero Technologies
 
「『Web化したい』に応えるには? ― Senchaを活かすDelphi/C++中間サーバー構築法」
「『Web化したい』に応えるには? ― Senchaを活かすDelphi/C++中間サーバー構築法」「『Web化したい』に応えるには? ― Senchaを活かすDelphi/C++中間サーバー構築法」
「『Web化したい』に応えるには? ― Senchaを活かすDelphi/C++中間サーバー構築法」
Embarcadero Technologies
 
「つながるシステム構築を可能にするDelphi / C++Builder / Sencha」
「つながるシステム構築を可能にするDelphi / C++Builder / Sencha」「つながるシステム構築を可能にするDelphi / C++Builder / Sencha」
「つながるシステム構築を可能にするDelphi / C++Builder / Sencha」
Embarcadero Technologies
 
「開発者にコミットするエンバカデロのツール戦略 ― 新たにSenchaを製品ファミリーに迎えて」
「開発者にコミットするエンバカデロのツール戦略 ― 新たにSenchaを製品ファミリーに迎えて」「開発者にコミットするエンバカデロのツール戦略 ― 新たにSenchaを製品ファミリーに迎えて」
「開発者にコミットするエンバカデロのツール戦略 ― 新たにSenchaを製品ファミリーに迎えて」
Embarcadero Technologies
 
「RAD Studioアプリケーションとバックエンドシステムを接続する」
「RAD Studioアプリケーションとバックエンドシステムを接続する」「RAD Studioアプリケーションとバックエンドシステムを接続する」
「RAD Studioアプリケーションとバックエンドシステムを接続する」
Embarcadero Technologies
 
「RAD Studio 10.1 Berlinで始めるIoTアプリケーション構築」
「RAD Studio 10.1 Berlinで始めるIoTアプリケーション構築」「RAD Studio 10.1 Berlinで始めるIoTアプリケーション構築」
「RAD Studio 10.1 Berlinで始めるIoTアプリケーション構築」
Embarcadero Technologies
 
「ビーコンで位置検出!BeaconFenceによる館内ナビシステム構築事例」
「ビーコンで位置検出!BeaconFenceによる館内ナビシステム構築事例」 「ビーコンで位置検出!BeaconFenceによる館内ナビシステム構築事例」
「ビーコンで位置検出!BeaconFenceによる館内ナビシステム構築事例」
Embarcadero Technologies
 
「エンタープライズ開発サポートを強化するエンバカデロの開発ツール戦略」
 「エンタープライズ開発サポートを強化するエンバカデロの開発ツール戦略」  「エンタープライズ開発サポートを強化するエンバカデロの開発ツール戦略」
「エンタープライズ開発サポートを強化するエンバカデロの開発ツール戦略」
Embarcadero Technologies
 
「開発者が知りたいDelphi実践テクニック!明日から使えるテクニック集」
「開発者が知りたいDelphi実践テクニック!明日から使えるテクニック集」「開発者が知りたいDelphi実践テクニック!明日から使えるテクニック集」
「開発者が知りたいDelphi実践テクニック!明日から使えるテクニック集」
Embarcadero Technologies
 
「今どきのUXを実現するためのRAD Studio新機能活用テクニック」
「今どきのUXを実現するためのRAD Studio新機能活用テクニック」「今どきのUXを実現するためのRAD Studio新機能活用テクニック」
「今どきのUXを実現するためのRAD Studio新機能活用テクニック」
Embarcadero Technologies
 
「RAD Studioアプリケーションとバックエンドシステムを接続する」
「RAD Studioアプリケーションとバックエンドシステムを接続する」「RAD Studioアプリケーションとバックエンドシステムを接続する」
「RAD Studioアプリケーションとバックエンドシステムを接続する」
Embarcadero Technologies
 
「RAD Studio 10.1 Berlinで始めるIoTアプリケーション構築」
「RAD Studio 10.1 Berlinで始めるIoTアプリケーション構築」「RAD Studio 10.1 Berlinで始めるIoTアプリケーション構築」
「RAD Studio 10.1 Berlinで始めるIoTアプリケーション構築」
Embarcadero Technologies
 
「フォームアニメーションで満足度向上!モバイルアプリ改善術」
「フォームアニメーションで満足度向上!モバイルアプリ改善術」「フォームアニメーションで満足度向上!モバイルアプリ改善術」
「フォームアニメーションで満足度向上!モバイルアプリ改善術」
Embarcadero Technologies
 
「IoTの活用もいよいよ現実に!エンバカデロの開発ツール戦略」
「IoTの活用もいよいよ現実に!エンバカデロの開発ツール戦略」「IoTの活用もいよいよ現実に!エンバカデロの開発ツール戦略」
「IoTの活用もいよいよ現実に!エンバカデロの開発ツール戦略」
Embarcadero Technologies
 

More from Embarcadero Technologies (20)

「コンポーネント/アプリケーション開発分離の重要性 ― VCL/FMXとExt JSの類似点の考察から見るその効果」
「コンポーネント/アプリケーション開発分離の重要性 ― VCL/FMXとExt JSの類似点の考察から見るその効果」「コンポーネント/アプリケーション開発分離の重要性 ― VCL/FMXとExt JSの類似点の考察から見るその効果」
「コンポーネント/アプリケーション開発分離の重要性 ― VCL/FMXとExt JSの類似点の考察から見るその効果」
 
「マルチデバイスなDelphiで活かすWebアプリケーション」
「マルチデバイスなDelphiで活かすWebアプリケーション」「マルチデバイスなDelphiで活かすWebアプリケーション」
「マルチデバイスなDelphiで活かすWebアプリケーション」
 
「開発の現場でも役に立つボトムアップによるデータモデリング活用実例」
「開発の現場でも役に立つボトムアップによるデータモデリング活用実例」「開発の現場でも役に立つボトムアップによるデータモデリング活用実例」
「開発の現場でも役に立つボトムアップによるデータモデリング活用実例」
 
「SenchaユーザーのためのRAD Studio入門」
「SenchaユーザーのためのRAD Studio入門」「SenchaユーザーのためのRAD Studio入門」
「SenchaユーザーのためのRAD Studio入門」
 
「Delphi/C++BuilderユーザーのためのSencha入門」
「Delphi/C++BuilderユーザーのためのSencha入門」「Delphi/C++BuilderユーザーのためのSencha入門」
「Delphi/C++BuilderユーザーのためのSencha入門」
 
「Delphiマイグレーションの現状」
「Delphiマイグレーションの現状」「Delphiマイグレーションの現状」
「Delphiマイグレーションの現状」
 
「エンタープライズシステムの開発におけるSIerから見たSenchaの有効性」
「エンタープライズシステムの開発におけるSIerから見たSenchaの有効性」「エンタープライズシステムの開発におけるSIerから見たSenchaの有効性」
「エンタープライズシステムの開発におけるSIerから見たSenchaの有効性」
 
「『Web化したい』に応えるには? ― Senchaを活かすDelphi/C++中間サーバー構築法」
「『Web化したい』に応えるには? ― Senchaを活かすDelphi/C++中間サーバー構築法」「『Web化したい』に応えるには? ― Senchaを活かすDelphi/C++中間サーバー構築法」
「『Web化したい』に応えるには? ― Senchaを活かすDelphi/C++中間サーバー構築法」
 
「つながるシステム構築を可能にするDelphi / C++Builder / Sencha」
「つながるシステム構築を可能にするDelphi / C++Builder / Sencha」「つながるシステム構築を可能にするDelphi / C++Builder / Sencha」
「つながるシステム構築を可能にするDelphi / C++Builder / Sencha」
 
「開発者にコミットするエンバカデロのツール戦略 ― 新たにSenchaを製品ファミリーに迎えて」
「開発者にコミットするエンバカデロのツール戦略 ― 新たにSenchaを製品ファミリーに迎えて」「開発者にコミットするエンバカデロのツール戦略 ― 新たにSenchaを製品ファミリーに迎えて」
「開発者にコミットするエンバカデロのツール戦略 ― 新たにSenchaを製品ファミリーに迎えて」
 
「RAD Studioアプリケーションとバックエンドシステムを接続する」
「RAD Studioアプリケーションとバックエンドシステムを接続する」「RAD Studioアプリケーションとバックエンドシステムを接続する」
「RAD Studioアプリケーションとバックエンドシステムを接続する」
 
「RAD Studio 10.1 Berlinで始めるIoTアプリケーション構築」
「RAD Studio 10.1 Berlinで始めるIoTアプリケーション構築」「RAD Studio 10.1 Berlinで始めるIoTアプリケーション構築」
「RAD Studio 10.1 Berlinで始めるIoTアプリケーション構築」
 
「ビーコンで位置検出!BeaconFenceによる館内ナビシステム構築事例」
「ビーコンで位置検出!BeaconFenceによる館内ナビシステム構築事例」 「ビーコンで位置検出!BeaconFenceによる館内ナビシステム構築事例」
「ビーコンで位置検出!BeaconFenceによる館内ナビシステム構築事例」
 
「エンタープライズ開発サポートを強化するエンバカデロの開発ツール戦略」
 「エンタープライズ開発サポートを強化するエンバカデロの開発ツール戦略」  「エンタープライズ開発サポートを強化するエンバカデロの開発ツール戦略」
「エンタープライズ開発サポートを強化するエンバカデロの開発ツール戦略」
 
「開発者が知りたいDelphi実践テクニック!明日から使えるテクニック集」
「開発者が知りたいDelphi実践テクニック!明日から使えるテクニック集」「開発者が知りたいDelphi実践テクニック!明日から使えるテクニック集」
「開発者が知りたいDelphi実践テクニック!明日から使えるテクニック集」
 
「今どきのUXを実現するためのRAD Studio新機能活用テクニック」
「今どきのUXを実現するためのRAD Studio新機能活用テクニック」「今どきのUXを実現するためのRAD Studio新機能活用テクニック」
「今どきのUXを実現するためのRAD Studio新機能活用テクニック」
 
「RAD Studioアプリケーションとバックエンドシステムを接続する」
「RAD Studioアプリケーションとバックエンドシステムを接続する」「RAD Studioアプリケーションとバックエンドシステムを接続する」
「RAD Studioアプリケーションとバックエンドシステムを接続する」
 
「RAD Studio 10.1 Berlinで始めるIoTアプリケーション構築」
「RAD Studio 10.1 Berlinで始めるIoTアプリケーション構築」「RAD Studio 10.1 Berlinで始めるIoTアプリケーション構築」
「RAD Studio 10.1 Berlinで始めるIoTアプリケーション構築」
 
「フォームアニメーションで満足度向上!モバイルアプリ改善術」
「フォームアニメーションで満足度向上!モバイルアプリ改善術」「フォームアニメーションで満足度向上!モバイルアプリ改善術」
「フォームアニメーションで満足度向上!モバイルアプリ改善術」
 
「IoTの活用もいよいよ現実に!エンバカデロの開発ツール戦略」
「IoTの活用もいよいよ現実に!エンバカデロの開発ツール戦略」「IoTの活用もいよいよ現実に!エンバカデロの開発ツール戦略」
「IoTの活用もいよいよ現実に!エンバカデロの開発ツール戦略」
 

Recently uploaded

20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
SitimaJohn
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 

Recently uploaded (20)

20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 

「Creating Reusable UI Components with Ext JS (Ext JSでの再利用可能なUIコンポーネントの作成)」