The document provides an overview of ExtJS, a JavaScript framework. It discusses trends in JavaScript like single page applications and MVC architecture. It then defines ExtJS, noting it is an open source framework developed by Sencha with rich UI components and support for HTML5. Some key benefits of ExtJS are discussed, like cross-browser support, powerful build tools, and accessibility features. The document demonstrates a simple "Hello World" app in ExtJS and covers core concepts like components, data packages, layouts and containers. It also lists additional ExtJS topics like localization, drag and drop, theming and MVVM.

1. KICKSTART EXTJS
SHAKTI SHRESTHA
shakti.shrestha@gmail.com

2. ABOUT ME
I work at Miracle Interface as Chief
Technical Officer (CTO).
 Software Architect
 Focus on delivering applications with good
performance

3. ABOUT ME
A certified OCP in oracle 10g.
a Programmer by heart.
Also involved with ASPNETCOMMUNITY

4. AGENDAS
 What’s trending in javascript?
 What is Ext JS
 Why & When Ext JS?
 Ext JS : Let’s Kick & Start
 Demo

5. What’s trending in javscript?

6. What’s trending
 Single Page application
 Single Page Applications (SPA) are built on
expanding reach via the browser, reducing
round tripping, and enhancing User Experience
(UX).
 Eg. gmail.com, facebook.com

7. What’s trending
 Decouple data from UI or view(DOM)
 Code Management
 Callback Management (Events)
 Data & UI can be updated.
 Action & application status

8. What’s trending….
 Object Oriented Programming
 Abstraction
 abstraction is the process of separating ideas from
specific instances of those ideas at work. Wikipedia
 Inheritance
 Encapsulation

9. What’s trending….
 Model View Controller
 Model/Collection
 Views/Templates
 Controller/Router

10. LIBRARIES & FRAMEWORKS…
 JS frameworks/libraries
 BackboneJs
 AngularJs
 CanJs
 EmberJs
 MeteorJs
 ExtJs

11. What is Ext JS?

12. ABOUT EXT JS
 JavaScript framework
 Its MVC structure
 Extjs 5.x also includes MVVM feature
 Two way binding support
 It has very rich set of UI componets.

13. ABOUT EXT JS
 Developed & Maintained by sencha
 http://www.sencha.com/
 License
 Commercial
 GPL (Only for open source projects)

14. ABOUT EXT JS
 Download location
 http://www.sencha.com/products/extjs/details

15. EXTJS FEATURES
 Support for HTML 5
 Object-Oriented flavor
 Rich UI controls
 MVC architecture
 Awesome Documentation
 Moving to the mobile version

16. FEATURES…

17. Why & When Ext JS?

18. WHY & WHEN EXT JS?
 It includes a comprehensive library of JavaScript-
based classes
 UI components
 UI layouts
 Collections
 Networking
 Packaging tool (JS & CSS Compiler)
 and more..

19. WHY & WHEN EXT JS?
 Cross browser support
 Safari 6+,Firefox,IE 8+,Chrome,Opera 12+,Safari / iOS
6+,Chrome / Android 4.1+,IE 10+ / Win 8
 Ext JS 4.x supports (ie6+)
 Ext JS 5.x supports (ie8+)

20. WHY & WHEN EXT JS?
 Powerful build command
 Sencha command
 http://www.sencha.com/products/sencha-cmd/
 Packaging
 (Single application or break into multiple)
 CSS minimize

21. WHY & WHEN EXT JS?
 Templating
 Can be used when UI components are not able
to fulfill your demand.
 Provides initial code layer to jump start MVC
application

22. WHY & WHEN EXT JS?
 HTML5 framework but doesn’t require you to
write HTML.
 The index file just includes
 Ext JS framework link (JS & CSS)
 CSS file
 app.js (the code that starts the user-application)

23. WHY & WHEN EXT JS?
 Ext JS offers a way to write object-oriented
code
 Define classes
 Inheritance in a way that’s closer to classical
inheritance
 Doesn’t require the prototype property
 Best for enterprise applications

24. WHY & WHEN EXT JS?
 Accessibility
 Ext JS 5.0.1 makes it possible to create highly accessible
JavaScript applications by providing the tools that
developers need to achieve Section 508 and ARIA
compliance
 About accessibility
 Those with disabilities, especially the visually impaired
 Those who rely on assistive technologies, such as screen
readers, to use a computer
 Those who cannot use a mouse to navigate an application

25. Ext JS : Let’s Kick & Start

26. HELLO WORLD!!
Lets create first app in Extjs References the JavaScript
and CSS files from our
CDN as shown below:
Reference to script that
start the application

27. HELLO WORLD!!

28. HELLO WORLD!!

29. COMPONENTS
The Component Hierarchy

30. COMPONETS
Define childs
Parents & adding
childs

31. DATA PACKAGE
 The data package is what loads and saves all
of the data in your application. It consists of a
multitude of classes, but there are three that
are more important than all the others.
 Ext.data.Model
 Store
 Ext.data.proxy.Proxy

32. DATA PACKAGE

33. LAYOUTS AND CONTAINERS
The layout system is one of the most
powerful parts of Ext JS.
It handles the sizing and positioning of
every Component in your application.

34. LAYOUTS AND CONTAINERS

35. MORE…
 Localization in Ext JS
 Memory Management
 Right-to-Left Support in Ext JS
 Tablet and Touch-Screen Support in Ext JS 5
 Theming Ext JS

36. MORE…
 Draw Package
 Events
 Drag and Drop
 Sencha cmd
 Templates

37. MORE…
 MVC
 MVVM

38. Demo

39. Some Important links
 http://www.sencha.com
 http://docs.sencha.com/extjs/5.0/index.html
 http://docs.sencha.com/extjs/4.2.1/
 http://forum.sencha.com/

40. Questions

41. Thank you. 
THANK YOU 