ExtJS 6 new features (translated)

ExtJS new features Introduction using the Extjs,sencha team to develop a simple framework for creating applications that run on any type of device, from mobile to tablet to desktop, you will be able to produce the best user experience, write less code, combine a compelling and better subject, ExtJS has all the resources to create an amazing user experience on any device.

1 merging of ExtJS and Sencha touch

In Extjs5, the ExtJS and Sencha touch have been merged, the process of merging is very long, Sencha the Ext.data, Ext.app, and more in the framework are incorporated into the core package, expressed as part of the ExtJS attribute, stored in the EXT package, at the end of the Sencha touch in the presentation layer of the different aspects of the component merge, save a file, in ExtJS 6 in order to distinguish between different components in the framework, introduced the ToolKit item ToolKit ToolKit is a package that contains only the presentation layer in the frame Elements, package components such as: panels, buttons grids, etc., there are two kinds of toolKit in extjs6, they are: classical (classic) and Modern (modern), the application can choose the toolKit to use, and add to the program app . json file: "Toolkit": "Classic",//or "modern"

2. The Universal Core

Below the toolkits package is the generic core package, which will provide a common API interface for data (EXT.DATA) and application Architecture (EXT.APP), through a common Core, where applications can share code to manage data and The communication control logic for the viewModels or background process.

3. Sencha Touch

If you upgrade Sencha touch, you will immediately be able to benefit from ViewModel and Viewcontroler access, while using modern toolkit and universal core, you can still use a multi-process system under EXTJS5, and mouse events will have no The conversion of a seam to an event listener, such as Touchstart, without the need to detect the functionality of the device,

4. General-purpose applications and smartphones

With EXTJS6 and Sencha cmd6, you can create a common application using any of the toolkit, and in this way you can create a single application that runs on a mobile device, like a smartphone or Enterprise desktop app running on a IE8 or any device or browser. You can delete the Toollit key from the App.json file generated by the Sencha cmd to indicate which toolkit uses which theme, including a modified block.

"builds": {    "Classic": {        "Toolkit":"Classic",        "Theme":"theme-Triton"    },    "Modern": {        "Toolkit":"Modern",        "Theme":"theme-Triton"    }}

As you might think, we've designed themes for both classic and modern toolkit, but you can adjust the theme to your satisfaction. If you have a builds block in your App.json file, "Sencha app build" will create all builds of the design and save it in a separate folder, and you can also create it by pointing to the build key name, for example: Sencha AP P Build Modern

5. Trition Theme

ExtJS 6 new Trition theme, Trition theme is a minimalist flat theme, the most important feature of this theme is: Focus on the content on the element rather than the fillet or gradient, while supporting the font icon, font icons are mostly from the font Awesome, using Triton theme, Applications can easily control the size and color of these extensible vector icons.

Font-support icons include: Panel controls, tree nodes, form forms, buttons, check boxes, radio buttons, arrows, gride line icons, filter menus, and other visual elements that can use font icons.

6. Trigger Change size

Trition themes can be created to fit the size of a desktop application or tablet application, and for Classic Toolkit, it is easier to manage each of the Neptune and Crisp topics in a way that provides a "touch-size". For modern toolkit, obviously depending on the user's CSS layout, making the dimensions easier to control, on the smartphone, the HTML element can automatically add a X-big style class name and measure all the items to allocate a larger area.

7.Fashion

Fashion is a new component of Sencha, using the ' *.scss ' file to bind the theme, fashion, like the sass language, uses some useful extensions to support the tool, fashion is implemented in JavaScript, and runs only in the browser, in the PHANTOMJS, Sencha cmd can use fashion, just like creating an app listener to create a theme. This means that the Ruby system is no longer needed, because fashion runs in the browser without having to create the style rules again, and more importantly, we can expand and regenerate the theme based on app monitoring, which will gain more benefits in development.

8. Reports

ExtJS on the report display, introducing a new feature, the selected cell will be expanded by setting extensible:true, which will add a drag or a small area block to the right of the button, which allows the currently selected cell to expand horizontally and vertically

9. Operable mode (Actionable mode) and accessibility

The grid also supports ARIA's "operable Mode", which is an extension of the original cell editing mode. This will allow all types of cell content to get focus or activation via the keyboard. This is a huge step forward for accessibility, and for super users, you can navigate anywhere in the grid without a mouse.

Lazyitems Plug-in

The plug-in can delay rendering of subcomponents until rendered, reducing the cost of instantiation and initialization of the child components. For example, if you set Deferredrender to true in the label panel, the non-rendered label will not instantiate and initialize its descendant components, thus reducing overhead until the label is activated.

11. Screen reader Support (accessibility)

ARIA functionality has been directly to the component's lifecycle, which means no need to specify ARIA packages to get the right aria behavior. The application now supports screen readers (like Jaws) without specifying a reference.

12. Micro-loading (Microloader)

Sencha CMD 6 now contains a local storage cache, similar to the micro-loading of Sencha touch products. However, there are some important improvements: Caching can disable content loaded in App.json only by the micro-loading method will not be deleted only the current version of the application can remain stored locally

Related connections

http://docs.sencha.com/extjs/6.0/whats_new/whats_new.html English version of the original

http://extjs.org.cn/node/751 ExtJS Chinese official website

Http://www.ibm.com/developerworks/cn/web/wa-aj-extjs30/index.html ExtJS new features detailed introduction

Https://www.sencha.com/ExtJS official website (English version)

Http://docs.sencha.com/ExtJS Official Website documents

ExtJS 6 new features (translated)