Tweet
Tweet

Slide 1

Slide 1 text

Dive into Sencha ExtJs Sergii Danilov M.C.Dean, Web-developer

Slide 2

Slide 2 text

© 2012 M.C. Dean, Inc. Trends of site development

Slide 3

Slide 3 text

© 2012 M.C. Dean, Inc. Classic site Model (View model) MVC Controller View Server side - MVC Make view model and put it to View Request Response MVC Controller (JSON) Ajax Ajax model Client side - JQuery

Slide 4

Slide 4 text

© 2012 M.C. Dean, Inc. JavaScript application MVC Controller Base View loads just first time and it contains JS App code JavaScript application Request Response Web API Controller View model for JSON Ajax HTML Template JavaScript modules Server side – MVC 4 Client side

Slide 5

Slide 5 text

© 2012 M.C. Dean, Inc. Dive...

Slide 6

Slide 6 text

© 2012 M.C. Dean, Inc. What is ExtJs?

Slide 7

Slide 7 text

© 2012 M.C. Dean, Inc. Features available out of the box • Loader (RequireJS, CommonJS) • DOM queries (JQuery, Prototype) • Work with data (Underscore.js) • Application architecture (Backbone.js, AngularJS, Ember.js, KnockoutJS) • UI elements(JQuery UI, Kendo UI)

Slide 8

Slide 8 text

© 2012 M.C. Dean, Inc. Object model of ExtJs 4 Component Draggable Panel Tab Panel Window mixin extend extend extend Observable Resizable mixin mixin

Slide 9

Slide 9 text

© 2012 M.C. Dean, Inc. Extend

Slide 10

Slide 10 text

© 2012 M.C. Dean, Inc. Mixins

Slide 11

Slide 11 text

© 2012 M.C. Dean, Inc. Requires

Slide 12

Slide 12 text

© 2012 M.C. Dean, Inc. Alias

Slide 13

Slide 13 text

© 2012 M.C. Dean, Inc. Singleton

Slide 14

Slide 14 text

© 2012 M.C. Dean, Inc. Statics

Slide 15

Slide 15 text

© 2012 M.C. Dean, Inc. MVC pattern

Slide 16

Slide 16 text

© 2012 M.C. Dean, Inc. Model, Store View Controller

Slide 17

Slide 17 text

© 2012 M.C. Dean, Inc. Model

Slide 18

Slide 18 text

© 2012 M.C. Dean, Inc. Store

Slide 19

Slide 19 text

© 2012 M.C. Dean, Inc. Controller

Slide 20

Slide 20 text

© 2012 M.C. Dean, Inc. View

Slide 21

Slide 21 text

© 2012 M.C. Dean, Inc. Loader

Slide 22

Slide 22 text

© 2012 M.C. Dean, Inc. Application

Slide 23

Slide 23 text

© 2012 M.C. Dean, Inc. Viewport

Slide 24

Slide 24 text

© 2012 M.C. Dean, Inc. 'use strict';

Slide 25

Slide 25 text

© 2012 M.C. Dean, Inc. Declarative interface 4+ 3.6+ 6+ 10+ 11+

Slide 26

Slide 26 text

© 2012 M.C. Dean, Inc. You can do this… but I don’t recommend!

Slide 27

Slide 27 text

© 2012 M.C. Dean, Inc. Simple and modular

Slide 28

Slide 28 text

© 2012 M.C. Dean, Inc. Event (in controller)

Slide 29

Slide 29 text

© 2012 M.C. Dean, Inc. Event (in view)

Slide 30

Slide 30 text

© 2012 M.C. Dean, Inc. Communication • Server Proxy  Ajax  Rest  JsonP  Direct • Client Proxy  Local Storage Proxy  Session Storage Proxy  Memory Proxy • Ajax

Slide 31

Slide 31 text

© 2012 M.C. Dean, Inc. A lot of UI elements

Slide 32

Slide 32 text

© 2012 M.C. Dean, Inc. Demo

Slide 33

Slide 33 text

© 2012 M.C. Dean, Inc. Pros and Cons + All in one + High development speed + Cross-browser compatibility + The extensibility of components + JS optimization for deployment ‒ It costs little money ‒ Hardly theme changes

Slide 34

Slide 34 text

You have reached the end of this module. Thanks Do you have any questions? Sources: 1. http://www.sencha.com/ 2. http://docs.sencha.com/ext-js/4-1/ 3. http://docs.sencha.com/ext-js/4-2/extjs-build/examples 4. https://market.sencha.com/