ext js 4 architecture
DESCRIPTION
Ext JS 4 has a thoroughly revamped architecture that enables faster performance and more developer flexibility. In this session, we will take a tour through the revamped architecture of Ext JS 4.x, taking a high-level look at the updated data package, component hierarchy and core APIs. Afterwards, developers will have an understanding of why Ext JS 4 works the way it does and how best to leverage its underlying APIs.TRANSCRIPT
Ext 4 Architecture
Ed Spencer@edspencer
Ext JS Architecture
Components
State UtilitiesLayouts Data
Shared with Sencha Touch
Sencha Platform
Ext JS Sencha Touch
Platform
Sencha Platform
Data Layouts Utilities Charts Animation
Platform
Components
Data
Layout
Utilities
Component
Example
Store
Layout
Renderers
Grid
Ext 3
Store
Writer
Proxy
RecordReader
Ext 4
Store
Writer
Proxy
Reader
Model
Models
Writer
Proxy
Reader
Model
Models
Model
Models
Model
Fields
Models
Model
Fields
Associations
Models
Model
Fields
Associations
Validations
Models
Model
Fields
Associations
Validations
Proxy
Models
Model
Fields
Associations
Validations
Proxy
Business logic
Example
Example
User Order OrderItem
Example
User
Example
Order
Example
OrderItem
Loading Nested Data
GET /users/1.json
Loading Nested Data
GET /users/1.json
Automatically loads associations
Automatically loads associations
Integrated with Components
Integrated with Components
Integrated with Components
Stores
Store’s supporting cast
Store
Data Sorters Filters
Richer Store API
Sorters
Filters
Richer Store API
Sorters
Filters
Sorters and Filters are MixedCollections
Richer Store API
Sorters
Filters
Sorters and Filters are MixedCollections
Add/remove any time
Richer Store API
Sorters
Filters
Sorters and Filters are MixedCollections
Add/remove any time
Ext.util.Sorter
Richer Store API
Sorters
Filters
Sorters and Filters are MixedCollections
Add/remove any time
Ext.util.SorterExt.util.Filter
Proxies
Proxies
Proxy
ClientProxy ServerProxy
Server Proxies
AjaxProxy RestProxy ScriptTagProxy
ServerProxy
Client Proxies
ClientProxy
MemoryProxy WebStorageProxy WebSqlProxy
Proxies
ProxyStore/Model Operation
Ext.data.Operation
Operation
Ext.data.Operation
Operation
Mediates between Store and Proxy
Ext.data.Operation
Operation
Mediates between Store and Proxy
Create, Read, Update or Destroy
Ext.data.Operation
Operation
Mediates between Store and Proxy
Create, Read, Update or Destroy
Asynchronous
Ext.data.Batch
Batch
Create
Update
Destroy
Ext.data.Batch
Batch
Ext.data.Batch
Batch
Combines Operations
Ext.data.Batch
Batch
Combines Operations
Batches into 1 request
Ext.data.Batch
Batch
Combines Operations
Batches into 1 request
Can run sequentially
Summary
SummaryLarge scale Architecture in 3.x good
SummaryLarge scale Architecture in 3.x good
New data capabilities: Models
SummaryLarge scale Architecture in 3.x good
New data capabilities: Models Associations
SummaryLarge scale Architecture in 3.x good
New data capabilities: Models Associations Validations
SummaryLarge scale Architecture in 3.x good
New data capabilities: Models Associations Validations Flexible Proxies
SummaryLarge scale Architecture in 3.x good
New data capabilities: Models Associations Validations Flexible Proxies Operations & Batches
Questions?