ExtJS 5 Introduction

Transcript

1. 1.

   ExtJS 5 javascript UI framework

2. 2.

   What is ExtJS ? - Full featured client* Javascript framework

   - Become Industry standard - 60% of Fortune 100 uses it - Supports ALL browsers ?
3. 3.

   History of ExtJS

4. 4.

   Core concepts Core concepts

5. 5.

   Accessibility AIRA ( http://www.w3.org/WAI/intro/aria ) Section 508 ( http://www.section508.gov/ )

6. 6.

   Class system Dot notation (“.”) MyApp.util.Base64 MyApp.util.Base64 => /MyApp/util/Base64.js

7. 7.

   Components

8. 8.

   Data package

9. 9.

   Data package: Examples Associations: https://gist.github.com/noroot/7764926571bd466fc400 Validation: https://gist.github.com/noroot/212d8b8251bcdac0d27b

10. 10.

    Drag and Drop

11. 11.

    Events Event Normalization for touch devices

12. 12.

    Layouts and containers

13. 13.

    Localization Json storage for strings Supports RTL (Right to left

    languages)
14. 14.

    Memory management Memory leaks

15. 15.

    Theming

16. 16.

    Drawing library

17. 17.

    Application structure MVVM (M+VC) based application Sencha CMD (console based

    framework management tool) sencha generate app -ext MyApp ./app cd app sencha app watch
18. 18.

    Application structure ViewControllers Models Storages (or Stores) Routes

19. 19.

    ViewController

20. 20.

    ViewModel ViewModel example: https://gist.github.com/noroot/f094258eaa80e26a5ae3

21. 21.

    Routes

22. 22.

    Store AJAX REST LocalStorage JSON

23. 23.

    Store JSON example

24. 24.

    Application development order 1) Describe Layout and components 2) Define

    Models structure 3) Define Storages for models 4) Define Models bindings for models structure 5) Define behaviors for components and models
25. 25.

    MVVM MVVM - Model-View-ViewModel

26. 26.

    Examples Dashboard http://dev.sencha.com/ext/5.0.1/examples/index.html REST Grid: http://dev.sencha.com/ext/5.0.1/examples/restful/restful.html Organizer: http://dev.sencha.com/ext/5.0.1/examples/organizer/organizer.html Themes: http://dev.sencha.com/ext/5.0.1/examples/themes/index.html

    WebDesktop: http://dev.sencha.com/ext/5.0.1/examples/desktop/index.html Executive Dashboard: http://dev.sencha.com/ext/5.0.1/examples/executive- dashboard/index.html#!kpi/clicks Trees: http://dev.sencha.com/ext/5.0.1/examples/tree/locking-treegrid.html Soap: http://docs.sencha.com/extjs/5.0/enterprise/soap.html
27. 27.

    Communities and collaboration Official site http://www.sencha.com/ Market: https://market.sencha.com/ Seek for

    answers: http://www.sencha.com/forum/index.php Lack of russian community
28. 28.

    Credits Dmitriy Rodichev twitter: @noroot github.com/noroot Enterprise is fine, people

    are fucked.