Agile Applications with ExtJS & Zend Framework Chris Cornutt - Dutch PHP Conference 2012 https://github.com/enygma/Agile-ExtJS-ZF Thursday, June 7, 2012 

The ExtJS Framwork Thursday, June 7, 2012 

“Ext JS 4 is a pure JavaScript application framework that works everywhere from IE6 to Chrome 11. It enables you to create the best cross- platform applications using nothing but a browser, and has a phenomenal API.” - sencha.com Thursday, June 7, 2012 

What it Is A full-stack Javascript framework Complete with widgets, MVC & event handling Large Thursday, June 7, 2012 

What it Isn’t Easy to learn Bug free Lightweight Thursday, June 7, 2012 

Key Parts Controllers Views Models Stores (of MVC) Thursday, June 7, 2012 

In the Box Event handling Auto-loading (lazy) Generated DOM Theming via CSS/LESS Thursday, June 7, 2012 

Widgets Toolbar Menus Date/color Pickers Multiple Layout Types Data Grids Charting Form Handling Data Tree ...among others. Thursday, June 7, 2012 

Widgets - Toolbar/Menu Can be used either as a generic container or as a true “toolbar” Thursday, June 7, 2012 

Widgets - Pickers Opens popup for “picker” element, built-in are color & date. Thursday, June 7, 2012 

Widgets - Data Grid Most used widget type, provides much more than just row display. Thursday, June 7, 2012 

Widgets - Charting Types of Graphs: - Bar - Line - Pie - Gauge - Radar - Scatter - Series Thursday, June 7, 2012 

Widgets - Tree Thursday, June 7, 2012 

Widgets - Forms Thursday, June 7, 2012 

Layout Types Absolute Accordion Anchor Border Card Column Fit Table Vbox Hbox Absolutely positioned elements Panels that slide in and out Items are “anchored” to the parent ‘s sides Regions are assigned and filled (N/S/E/W) Tab panel or Wizard using “card” panels Columns of elements Elements fit to the size of the parent Rows and cells Items aligned vertically Items aligned horizontally Thursday, June 7, 2012 

Controllers Extends “Ext.app.Controller” Loads for models, views and stores init() Handles actions “Controllers are the glue that binds an application together. All they really do is listen for events (usually from views) and take some action.” Thursday, June 7, 2012 

Example - Controller Ext.define(‘example.controller.Index’, { extend: ‘Ext.app.Controller’, models: [ ‘User’ ], stores: [ ‘index.User’ ], views: [ ‘Userlist’ ], init: function() { console.log(‘Init controller!’); } }); Thursday, June 7, 2012 

Controllers init() control() refs getter/setters Common Methods/Properties Thursday, June 7, 2012 

Example - Controller Ext.define(‘example.controller.Index’, { extend: ‘Ext.app.Controller’, refs: [ { ref: ‘list’, selector: ‘grid’ } ], models: [ ‘User’ ], stores: [ ‘index.User’ ], views: [ ‘Userlist’ ], init: function() { console.log(‘Init controller!’); this.control({ ‘button’: { click: this.refreshGrid } }); }, refreshGrid: function() { this.getList().store.load(); } }); Thursday, June 7, 2012 

Model Extends “Ext.data.Model” Defines fields and their types Can have methods of its own Setting validations “A Model represents some object that your application manages. For example, one might define a Model for Users, Products, Cars, or any other real-world object that we want to model in the system. Models are registered via the model manager, and are used by stores, which are in turn used by many of the data-bound components in Ext.” Thursday, June 7, 2012 

Example - Model Ext.define(‘example.model.Message’, { extend: ‘Ext.data.Model’, fields: [ { name: ‘message’, type: ‘string’ }, { name: ‘username’, type: ‘string’ }, { name: ‘id’, type: ‘int’ } ] initComponent: function() { console.log(‘Init Message model!’); this.callParent(arguments); } }); Thursday, June 7, 2012 

Models fields validations (and validate) belongsTo/hasMany/associations proxy Common Methods/Properties Thursday, June 7, 2012 

Store Extends “Ext.data.Store” Client-side data resource Data set locally or through a Proxy AutoLoad/AutoSync “The Store class encapsulates a client side cache of Model objects. Stores load data via a Proxy, and also provide functions for sorting, filtering and querying the model instances contained within it.” Thursday, June 7, 2012 

Example - Store Ext.define(‘example.store.User’, { extend: ‘Ext.data.Store’, model: ‘example.model.User’, initComponent: function() { console.log(‘Init User store!’); this.callParent(arguments); } }); Thursday, June 7, 2012 

Views Extends whatever panel/widget type you need Can be aliased initComponent Nested views/widgets “The View uses an Ext.XTemplate as its internal templating mechanism, and is bound to an Ext.data.Store so that as the data in the store changes the view is automatically updated to reflect the changes. The view also provides built-in behavior for many common events that can occur for its contained items including click, doubleclick, mouseover, mouseout, etc. as well as a built-in selection model.” Thursday, June 7, 2012 

Example - View Ext.define(‘example.view.index.Buttons’, { extend: ‘Ext.Panel’, alias: ‘widget.buttonpanel’, items: [ { xtype: ‘button’, text: ‘Click Me!’, handler: function() { } } ], initComponent: function() { console.log(‘Init User store!’); this.callParent(arguments); } }); Thursday, June 7, 2012 

The Zend Framework Thursday, June 7, 2012 

Controllers Types: Front, Action, Router_Rewrite, Dispatcher_Standard Augmented by “action helpers” init(), preDispatch() methods run first Accessors for request, parameters, arguments “The Zend_Controller system is designed to be lightweight, modular, and extensible. It is a minimalist design to permit flexibility and some freedom to users while providing enough structure so that systems built around Zend_Controller share some common conventions and similar code layout.” Thursday, June 7, 2012 

Example - Controller Thursday, June 7, 2012 

Model Open ended for your interface Can use things like Zend_Db_Table ...or Doctrine Relationships (_dependentTables, _referenceMap) “The model captures the domain logic of the application — those actions a user might want to request — with a strong separation from the way that the user requests them and sees the results.” Thursday, June 7, 2012 

Example - Model Thursday, June 7, 2012 

View “View helpers” Partials Work with template engines (like Twig) “Views define exactly what is presented to the user. Usually controllers pass data to each view to render in some format. Views will often collect data from the user, as well. This is where you're likely to find HTML markup in your MVC applications.” Thursday, June 7, 2012 

Example - View My Application output; ?> Thursday, June 7, 2012 

Zend + Ext JS Thursday, June 7, 2012 

ZF Controller Ext Controller ZF View Ext Store Ext View ZF Model Ext Model ZF Data Source Thursday, June 7, 2012 

The usual stuff is easy... Custom plugins (like a RowExpander) HTML5 Features (File drag, local storage, form fields) Still need Javascript knowledge In Ext JS... Thursday, June 7, 2012 

Can be over-complicated Very flexible (both good and bad?) Don’t expect a “do it all for me” framework Single-page versus Multiple Pages? In Zend Framework... Thursday, June 7, 2012 

Example Time! Thursday, June 7, 2012 

Creating a basic application Setting up a Model and Store Widget Examples Working with Layouts Grids & Database Backend Simple User System Unit Testing with Jasmine Advanced App - Real-time Chat Thursday, June 7, 2012 

To the Cloud...er Code! Thursday, June 7, 2012 

Chris Cornutt @enygma @phpdeveloper / @phpquickfix https://joind.in/6220 Thanks! Thursday, June 7, 2012