Sencha Ext JS 5.0 Preview Daniel Gallo Sales Engineer 

Who am I? • Daniel Gallo (@DanielJGallo)! • Technical Sales Engineer at Sencha! • Based in the UK! • Using Sencha’s frameworks since 2009! • Joined Sencha in February 2012! • Background in web app development 
 (ASP.NET C#) 

Sencha Ext JS 5 

• Touch-screen support! • Tablets and touch-screen laptops! • New themes (Crisp and Neptune Touch)! • Gestures and momentum scrolling! • Write your app once and deploy to both desktop and tablet users New Features 

No content

• New application architecture - MVVM (Model-View- ViewModel)! • Two-way data binding automates the connection of the model layer to the view! • View Controllers that are unique to each instance of a view! • View Models manage a data object and allows the connected view to bind to the data and be notified whenever it changes! • A lot less code due to two-way data binding! • Less complex controllers New Features 

New Features • Traditional MVC application approach: 

New Features • MVVM application approach: 

New Features • MVVM and View Controllers: 

• Charts upgrade! • New touch-enabled charting package, Sencha Charts! • Separate Kitchen Sink for showcasing different Charts! • Two charting packages initially New Features 

• Data package improvements! • Merge of the data packages from Sencha Touch and Sencha Ext JS in to a Sencha Core Package! • Many to Many Associations! • Chained Stores to allow multiple components to use the same dataset, but have different sorting, filtering and grouping defined! • Data Sessions to help persist a batch of changes to the server, in the correct order New Features 

• Data package improvements! • Heterogenous Tree Stores mean trees can contain nodes of multiple types! • Custom field types for Models to help with validation! • Model Validation Binding to easily reflect validation results in the forms where the values are displayed, so less custom code New Features 

• Routing! • Enables deep linking within applications by mapping the URL through to controller actions / methods! • Browser history support! • Sencha Core Package! • Contains core code that is shared between Ext JS 5 and the next major version of Sencha Touch - Class system, Data, Events, Utilities, and Feature/Environment detection! • More code will be able to be shared between the frameworks New Features 

• Widgets! • A lightweight component that can be created at minimal cost! • Can be used in Grids where multiple instances of components may need to be shown in each cell New Features Ext.Widget 

• Grids! • Widget column for adding a component or widget config that’s then used as a template for cells in that column ! ! ! ! ! ! • Buffered updates allow you to specify how often changes are updated in the DOM! • Further rendering optimisations New Features 

• Forms! • Form field layouts div-based - improved rendering times! • New Tag Field component New Features 

• Dashboards! • Revised portal example based on a new Dashboard component! • Resizable columns, column creation via drag/drop, and item persistence New Features Ext.dashboard.Dashboard 

• Responsive Plugin! • New plugin that can be added to component instances to enforce how the component is configured under different conditions New Features Ext.create({ xtype: 'viewport', layout: 'border', ! items: [{ title: 'Some Title', plugins: 'responsive', ! responsiveConfig: { 'width < 800': { region: 'north' }, ! 'width >= 800': { region: 'west' } } }] }); Ext.plugin.Responsive 

• Responsive Plugin! • Can use many different expressions, such as:! •landscape •portrait •tall •wide •width •height •platform New Features Ext.create({ xtype: 'viewport', layout: 'border', ! items: [{ title: 'Some Title', plugins: 'responsive', ! responsiveConfig: { landscape: { region: 'north' }, ! portrait: { region: 'west' } } }] }); Ext.plugin.Responsive 

Demo 

• Public beta released on 3rd April! • New examples at dev.sencha.com/ext/5.0.0/ Sencha Ext JS 5 

• Documentation and guides at docs.sencha.com/extjs/5.0.0/ Getting Started 

• Some useful guides:! • What’s new in Ext JS 5! • Ext JS 5 Upgrade Guide! • Sencha Cmd 5 Upgrade Guide! • Charts - Upgrade Guide Getting Started 

• Previous webinar recordings:! • “Are you ready for Ext JS 5?”: https://vimeo.com/93586920 Getting Started 

• Ext JS 5 Update Training! • 3 full days or 5 half days live online! • Fast Track to Ext JS 5 Training! • 5 full days or 10 half days live online! ! • Advanced Theming for Sencha Touch Training! • 3 full days or 5 half days live online! • Advanced Theming for Ext JS Training! • 3 full days or 5 half days live online New Course Offerings for 2014 

• November 10th - 13th! • San Francisco Bay Area! • pages.sencha.com/SenchaCon2014RegistrationNotification.html SenchaCon 2014 

Questions? 

Create amazing apps built on web standards