7/27/2019 ExtJS_4_0

1/32

ExtJS 4.0

JavaScript MVC Framework

7/27/2019 ExtJS_4_0

2/32

Who

ExtJS is provided by Sencha (www.sencha.com)o Sencha Toucho GWTo CSS Animatoro IO (Cloud Data Management)

7/27/2019 ExtJS_4_0

3/32

What

ExtJS is a MVC Frameworko Model-View-Controlo Unlike JQuery and other major JS library providers

7/27/2019 ExtJS_4_0

4/32

When

ExtJS 4.0 was released around April 2011

7/27/2019 ExtJS_4_0

5/32

Why

This is really what matters (MVC)o Easy Client-side data modeling

Relational Modelso Simple to use GUI widgetso Full robustness of EcmaScript control

7/27/2019 ExtJS_4_0

6/32

MVC

Why is MVC so important?o In this case, it is because it is 100%, agent-based,

client side codeo This means typical MVC on the server is not needed

Good or Bad? Design decision

7/27/2019 ExtJS_4_0

7/32

Server Side MVC

7/27/2019 ExtJS_4_0

8/32

Server Side Models

Server Side Models are simple classes that house an'instantiated' version of a resource recordo Resource Records can be a row from a MySql Table,

required parameters from another server public api,

web service, etc These models should be transparent to the controller on

how the raw data is represented, but rather be in aspecified format for the controller

7/27/2019 ExtJS_4_0

9/32

Server Side Models

To facilitate how the model instantiates data, usually amap is present

The Map is capable of understanding how to speak withthe resourceo "Select `id`, `first`, `last` from `names`......

The model would then have member variables:o $model->ido $model->firsto $model->lasto ....

7/27/2019 ExtJS_4_0

10/32

Server Side Models

All of my models have key featureso 1-to-1 resource mappingo $model->save()o $model->find()o $model->delete()

Similar to CRUD operations except I leave save() todetermine wether it is Create or Updateo CRUD === 'Create Read Update Destroy'

7/27/2019 ExtJS_4_0

11/32

Server Side Views

Sever Side View classes, for most frameworks, take themodel data and return the requested type of viewo echo($view->buildTable(records));

This buildTable() function is called by a controller, who

then echo()'s the html generated by the view Has one major fault

o What happens when I want to use this server sidestack for mobile apps?

Are there any performance flaws?

7/27/2019 ExtJS_4_0

12/32

Server Side Control

We have seen that how models and views worko These require some sort of delegation

Controllers will receive the request from the client (oldview), do any preprocessing, call the model (CRUD), use

the model data, call the view, and return the html Within this return, we usually find JavaScript embedded

as a code agent to 'enchance' our viewing pleasure. What if we mixed this up a bit and used JavaScript as our

primary source of control?

7/27/2019 ExtJS_4_0

13/32

Client Side JS with ExtJS

MVC for JavaScript Exactly same process for server side stack, except we

now try to use the server as little as possibleo This allows for powerful client machines to do most of

our processing and renderingo Only allow the client to manipulate data that can be

considered hostile!

7/27/2019 ExtJS_4_0

14/32

ExtJS Models

The most important feature of ExtJSo Can have relational models!!!!!!!o Example:

Orders (a model) can have many Order Items

(another model)o Each record of orders is stored in storeo Each record of orders points to another store that has

its Order itemso This allows us to select an order, and then immediately

have access to all its order items

7/27/2019 ExtJS_4_0

15/32

ExtJS View

Since this is JavaScript, we immediately expect robustGUI widgets

Of course, you can add CSS and style them

7/27/2019 ExtJS_4_0

16/32

ExtJS Control

JavaScript is a functional languageo This allows for very strong and very easy control logic

o Of course, you can still use OOP style if desired

7/27/2019 ExtJS_4_0

17/32

So how does this all work?

By using MVC on the client side:o We only need to contact the server when using

CRUD operationso By control logic when otherwise needed

Lets go through an example

7/27/2019 ExtJS_4_0

18/32

Simple Form with Grid

Our goal will be to makea form, that upon submit,updates a local store

This store feeds a grid

and will automaticallyupdate when a newrecord is inserted

7/27/2019 ExtJS_4_0

19/32

Our data we will work with

JSON (JavaScript Object Notation)

7/27/2019 ExtJS_4_0

20/32

Configure Script

We first must wrap all of our JavaScript within anonLoad() function

7/27/2019 ExtJS_4_0

21/32

Create the Model

Typically, we will alwaysrepresent modeled data,so it seems wise to startthere

Similar to the serverstack, we use the modelto communicate with theresourceo In this case, a flat file

named contacts.json

7/27/2019 ExtJS_4_0

22/32

Create the View

7/27/2019 ExtJS_4_0

23/32

Create the View

7/27/2019 ExtJS_4_0

24/32

Create the View

7/27/2019 ExtJS_4_0

25/32

Create the View

7/27/2019 ExtJS_4_0

26/32

Create the View

7/27/2019 ExtJS_4_0

27/32

Create the View

7/27/2019 ExtJS_4_0

28/32

Create the View

7/27/2019 ExtJS_4_0

29/32

Tie in the Control

7/27/2019 ExtJS_4_0

30/32

Tie in the Control

7/27/2019 ExtJS_4_0

31/32

Final Product

7/27/2019 ExtJS_4_0

32/32

Now lets create this