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.