1. Tech Session
Abdullah Muhammad
Umar Ali

2. Ext JS
ExtJS is an HTML5 Javascript framework which
helps building rich web application

3. A Quick Sencha History
•January 2006
Jack Slocum developed an extension to YUI called yui-ext
•December 2007
ExtJS 2.0 (Interface & features more similar to traditional desktop
apps)
•April 2008
ExtJS 2.0 moved from BSD to GPL 3.0 / Commercial License
•July 2009
ExtJS 3.0 (REST & Ext.Direct server-side platform support, added
Flash Charting & ListView elements)
•June 2010
A merger of ExtJS with Raphael & JQTouch announced, forming
Sencha
•April 2011
ExtJS 4.0 (New class structure, MVC)
Source: http://en.wikipedia.org/wiki/Ext_JS

4. •MVC Architecture
•Extensive Layouts
•Complex Data Controls
•Very capable Class Structure
Why Ext JS?

5. Salient Features >>>

6. Cross Platform Browser Compatibility

7. Widgets, widgets, widgets… (OH, my!)
Drag & Drop

8. Good Documentation

9. Community
Support

10. And yet more…
•MVC Architecture
•AJAX Support
•Event Handling
•Selectors
•Animation
•DOM Traversing & Manipulation
•Support Json, Xml Responses

11. ARGH’s of Sencha
•Terrible Debugging
•Awfully nested DOM
•Slow UI with numerous widgets

12. Examples >>>

16. MVC Architecture >>>

17. File Structure

18. Index.html
app.js

19. View

20. Defining Controller
Adding Controller reference to Application

21. Setting up Listeners

22. View

23. Defining a Grid Panel View

24. Adding Grid Panel reference to Controller
View as an Xtype

25. View

26. Adding Grid Panel Items Listener

27. View

28. Defining a Grid Item Edit View

29. Completing Edit View Listener and Loading Store

30. View

31. Creating a Store
Including Store in Controller
Binding Store to Grid Panel

32. Creating a Model
Adding reference of Model to Controller and Store

33. View

34. Saving Data with Model

35. View

36. Completing Save Button Listener
View

37. Saving data to Server
user.json

38. Making changes on Server side
Syncing updates to the Store

39. Verifying the Request

41. Thank You!