kickstart sencha extjs

Click here to load reader

Download Kickstart sencha extjs

Post on 16-Nov-2014




3 download

Embed Size (px)


Slides on how to start development using extjs


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 Whats trending in javascript? What is Ext JS Why & When Ext JS? Ext JS : Lets Kick & Start Demo 5. Whats trending in javscript? 6. Whats 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., 7. Whats trending Decouple data from UI or view(DOM) Code Management Callback Management (Events) Data & UI can be updated. Action & application status 8. Whats trending. Object Oriented Programming Abstraction abstraction is the process of separating ideas from specific instances of those ideas at work. Wikipedia Inheritance Encapsulation 9. Whats 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 License Commercial GPL (Only for open source projects) 14. ABOUT EXT JS Download location 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 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 doesnt 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 thats closer to classical inheritance Doesnt 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 : Lets 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. Store 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 40. Questions 41. Thank you. THANK YOU