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