Slides on how to start development using extjs

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 