Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sencha Ext JS 5 Preview

Sencha Ext JS 5 Preview

Delivered to the Sencha Touch Online Meetup in Germany

Daniel Gallo

May 22, 2014
Tweet

More Decks by Daniel Gallo

Other Decks in Education

Transcript

  1. 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#)
  2. • 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
  3. • 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
  4. • Charts upgrade! • New touch-enabled charting package, Sencha Charts!

    • Separate Kitchen Sink for showcasing different Charts! • Two charting packages initially New Features
  5. • 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
  6. • 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
  7. • 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
  8. • 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
  9. • 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
  10. • Forms! • Form field layouts div-based - improved rendering

    times! • New Tag Field component New Features
  11. • 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
  12. • 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
  13. • 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
  14. • Public beta released on 3rd April! • New examples

    at dev.sencha.com/ext/5.0.0/ Sencha Ext JS 5
  15. • 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
  16. • Previous webinar recordings:! • “Are you ready for Ext

    JS 5?”: https://vimeo.com/93586920 Getting Started
  17. • 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
  18. • November 10th - 13th! • San Francisco Bay Area!

    • pages.sencha.com/SenchaCon2014RegistrationNotification.html SenchaCon 2014