Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Ext JS 6.5 Launch Webinar
Similaire à Ext JS 6.5 Launch Webinar (20)
Plus de Sandeep Adwankar
Plus de Sandeep Adwankar (17)
Dernier
Dernier (20)
Ext JS 6.5 Launch Webinar
- 1. © 2016 Sencha Inc What’s New in Ext JS 6.5 Sandeep Adwankar
- 2. © 2016 Sencha Inc What’s New in Ext JS 6.5 and Cmd 6.5 • New and improved components • Rich data visualization and data analytics • Virtual store and dynamic package loading improve performance for massive data sets • ECMAScript 2016/ES6 support • Support for progressive web apps Deliver rich desktop and mobile experiences using the Modern toolkit
- 3. © 2016 Sencha Inc Modern Grid • Control selection of cells, rows & columns 3 Flexible Selections • Inline cell editing and form-based row editing Cell Editing
- 4. © 2016 Sencha Inc Tree: Simplified Editing of Hierarchical Data • Inline editing, tabbing and scrolling 4 Desktop • Optimized for mobile Mobile
- 5. © 2016 Sencha Inc Grid Enhancements 5 • Loads only pages needed by the grid to optimize performance • Ensures browser performs well even with the largest data sets • Add actions to list List • Add tools to grids Grid ToolsVirtual Store
- 6. © 2016 Sencha Inc Forms • Field masking, extensible validations and numerous labeling and error display options 6 Forms Validation • Advanced validation options: IP address, length, number, phone, time Advanced Validations
- 7. © 2016 Sencha Inc Panels and Tabs 7 Header resizing, rotation & collapsing Header position & tools
- 8. © 2016 Sencha Inc Menu Enhancements 8
- 9. © 2016 Sencha Inc Layout Enhancements 9 Card with indicators Layouts with resizable areas
- 10. © 2016 Sencha Inc Charts: New Components 10 Box Plot Navigator
- 11. © 2016 Sencha Inc New Components 11 Date Field and Panel Dialog
- 12. © 2016 Sencha Inc D3 Adapter Enhancements • Upgraded to D3 V4 API – Modular support • New Organization Chart visualization that works with hierarchical data 12 Org Chart
- 13. © 2016 Sencha Inc Pivot Grid Enhancements 13 Widget column Collapsible rows & columns
- 14. © 2016 Sencha Inc Exporter Enhancements • Export pivot table definitions enabling users to export raw data and the pivot table natively into Excel 14
- 15. © 2016 Sencha Inc Accessibility and Theming • Focus management and keyboard navigation are now supported with forms and grids - Navigate easily to different form fields and grid cells - Expanded theming API gives more control over the appearance of components 15
- 16. © 2016 Sencha Inc New Real-life Examples 16
- 17. © 2016 Sencha Inc Coworkee (Employee Directory) 17
- 18. © 2016 Sencha Inc Sencha Cmd 6.5 18
- 19. © 2016 Sencha Inc Sencha Cmd 6.5 • Dynamic Package Loading to create a smooth loading experience for large applications • Progressive Web App Configs to create mobile web apps that work in offline mode with service worker based caching • ECMAScript 2015 (or ES6) support to create Ext JS applications using the latest advances in JavaScript standards 19 New Features
- 20. © 2016 Sencha Inc Summary • New and improved components • Rich data visualization and data analytics • Virtual store and dynamic package loading improve performance for massive data sets • ECMAScript 2016/ES6 support • Support for progressive web apps Deliver rich desktop and mobile experiences using the Modern toolkit
- 21. © 2016 Sencha Inc Demo
- 22. © 2016 Sencha Inc Thank You! For more information about Ext JS visit https://www.sencha.com/products/extjs
Notes de l'éditeur
- On behalf of the entire Sencha team, we’re excited to announce the release of Ext JS 6.5 and Sencha Cmd 6.5. Ext JS 6.5 delivers some amazing new capabilities for the modern toolkit. Things like powerful new grid functionality, advanced form validation, menus, dialogs and more. If you think of the modern toolkit as "mobile first", you're right. But if you think it is "mobile only", Ext JS 6.5 will change your mind in a big way. With Ext JS 6.5, you can deliver rich desktop and mobile experiences using the Modern toolkit.
- Grids now support inline cell editing as well as form-based row editing. Choosing between these experiences is a simple task using platformConfig. For desktop users, inline cell editing using the “gridcellediting” plugin is a great choice. For mobile users, having the modal form to edit the fields of a row using the “gridedittable” plugin is a better choice. You can given users the ability to directly manipulate cells, columns groups using grid tools. Tools are just small only buttons that you can add to any of these grid areas. Column headers now support popup menus with column options as was the case in the classic toolkit. You can provide custom groupers, pinned headers and footers, and more. With Ext JS 6.5, Tree supports the same grid plugins for editing cells as well as editing an entire grid row. The grideditable plugin is now joined by the gridcellediting plugin. The grideditable plugin is a good choice for a mobile user. It provides a modal form to edit the fields of a row that slides in from the side. For desktop users, however, inline cell editing is often a better choice and this is now available in the gridcellediting plugin. As with grideditable, the form field to use is configured with the column's editor config By default, while editing a cell on a row, the cell editor plugin will prevent that row from scrolling out of view. The row will automatically be pinned to the top or bottom of the grid when the row would normally be above or below the visible area. While editing you can navigate to the next and previous cells using TAB and Shift+TAB. In fact, as part of cell editing, most of the actionable mode spec for keyboard interaction is supported in this release.
- The virtual store allows you to create grids and lists that render and scroll through extremely large datasets. Like the buffered store in the classic toolkit, the virtual store loads only the pages needed by the grid. When combined with list's infinite config, which is on by default in grids, only a small portion of these loaded records are rendered to the DOM. All these optimizations ensure that the browser performs well for the user regardless of the amount of data you are presenting The new List swiper plugin allows you to add actions to list items accessed by left or right swipe gestures. You can also use List swiper stepper to step users through actions when an item is swiped. Even better, because Grid is a subclass of List, this plugin can be used in grids as well. With Ext JS 6.5, tools can go many more places… in particular, grids and lists!Probably the most commonly desired place for tools to appear is grid cells. In total, there are four zones for cell tools: "head", "tail", "start" and "end". The "head" and "tail" zones attach the tool to the cell content and are affected by content length as well as alignment. Conversely, "start" and "end" are always at the left or right edge of the cell, respectively. Column headers can also contain tools. For example you can provide column options by adding a gear to the column header. Column headers support the same four zones for tools, but default to the "tail" zone.
- Build sophisticated, data-entry applications is no longer rocket science with the new input masking and advanced validation features in Ext JS 6.5. We've enhanced components like the datefield to provide a great experience on desktop as well as mobile. The new containerfield allows you to easily connect multiple sub-fields with a single label and error display. On desktop devices, the datefield uses the new datepanel component. Of course, you can use the datepanel directly to show one or more months.
- In desktop applications, tabs need some extra capabilities. With Ext JS 6.5, tabs not only have all the material design goodies like ripple and indicator animation, but can be marked as closeable and disabled.
- Menus are an important component in desktop applications. They appear in places like context menus or mutli-function buttons, but they can also be found in some mobile applications though with fewer embellishments. Since menus extend panel, they support all the standard features of panels such as anchors. This also means menus can contain any component (not just menu items). This can be leveraged to great effect
- TabPanels and Carousels both enable you to see one screen of many at a time, and underneath they both use a Card Layout. With improvements in Card layout, you get an additional option to switch between cards by clicking/tapping on the indicator. Based on your application, you can configure tab steps one at a time in a direction, or directly jump to a card
- Charts now include a Box Plot and a new Navigator component. You can use the Navigator component to set the visible range of the x-axis of a cartesian chart. A common need for charts is to add titles and subtitles that layout nicely with the chart. The new chart captions config provides an easy way to handle this: Each caption can be customized using a config object, but that is typically not needed since captions support themes and will look great even if you change the theme on the fly.
- The datefield component uses the above picker controls to create a datepanel as the floated picker and a datepicker as the edge picker. The datepicker will be familiar from previous releases, but the datepanel is new in Ext JS 6.5. The datepanel presents one or more calendar months from which the user can select the desired date. The datepanel can be configured to display multiple months in a carousel arrangement as well: A dialog is a panel that is centered, draggable, floated and modal (by default). In addition, dialog adds the maximizable config and some refinements to processing the buttons config it inherited from panel.
- The Pivot Grid package helps you show a summarization of large datasets. With Ext JS 6.5, there is a tabular layout, similar to the Excel tabular form, for both Classic and Modern Toolkits – as shown in this example You can now include widgets inside a Pivot Grid, which allows you to create better visualizations, for example to show a ticker or rating component. Pivot Grid now also has additional configs to create collapsible rows and columns – making it even more compact and easier to read.
- The Exporter package enables you to export data to various file formats. With Ext JS 6.5, Exporter now supports exporting pivot table definitions, which means your users can now export the raw data and the Pivot Table natively into Microsoft Excel. As shown in the example below with the exported xlsx file, you can see a pivot table on the first sheet and raw data on the second sheet.
- Sencha Cmd 6.5 helps you build large, modern, progressive web applications using the latest advancements in JavaScript Sencha Cmd has supported the concept of packages for a long time, where each package can provide classes, styling, and resources for use in applications or other packages. With Cmd 6.5, you can use these packages in a whole new way – dynamically. Progressive Web Apps (PWAs) provide a near-native app experience using modern web technologies. With Cmd 6.5, you can display an app banner that invites Android users to install the app on their home screens. You can also provide offline support via service worker based caching. Currently, Chrome and Firefox support service worker based caching. You can add Service Worker caching related configurations using @sw-cache. This tells Cmd that you need caching in your application, and Cmd will ensure that the required service worker code is added at the time of application build. Sencha Cmd 6.5 supports transpilation of ES2015 source code to ES5 based code that works on non-ES2015 capable browsers. This means that Cmd can read code written with ES6 conventions, and it can produce the equivalent code for non-ES6 capable browsers.