Introducing React ReExt – Sencha Ext JS Components in React! LEARN MORE

Announcing Ext JS 6.5.2 and Sencha Cmd 6.5.2 GA

September 27, 2017 125 Views
Show

We’re excited to announce the release of Ext JS 6.5.2 and Sencha Cmd 6.5.2. These releases are focused on resolving issues reported by customers and the Ext JS community. Ext JS 6.5.2 includes hundreds of minor improvements and bug fixes in both the Modern and Classic toolkit. Cmd 6.5.2 includes updates for EcmaScript 2017 support so that you can use the latest JavaScript specification.

Try It Out

Ext JS 6.5.2 resolves the following customer reported issues

Grid

  • Grid view is blank after store reload
  • Re-ordering grouped header with inner items throws error
  • Grouped widgets in a grid with locked column does not render
  • Grid group tabbing navigation from bottom causes error
  • RTL grid does not display row editor correctly
  • Grid scroll position is reset and blanked out when moving between containers
  • Toolbar on gridpanel causes issue after destroyr
  • shift + select with checkbox does not work with spreadsheet selection model
  • Locked grouped grid doesn’t respect ‘lockable’ attribute of column
  • Locking a column in a locked grid subclass with dockedItems shows them twice

Charts

  • Bar Chart with 2 columns renders incorrectly

Theming

  • Loadmask spinner colors make it difficult to see in triton/neptune theme

Window

  • Window is sent to back when clicking the close tool while tooltip is visible
  • Window with destroy listener throws uncaught Controller error when closing window

Component Tpl

  • Component does not update correctly when changing tpl

Panel

  • Panel with no items and bound to collapsed isn’t actually collapsed
  • Panel throws exception on null buttons config

Tooltips

  • Tooltip not showing in correct position after view scroll

RadioGroup

  • Load record does not set radiogroup field in inactive tab correctly if it has a default value checked

ColorPicker

  • ColorPicker UX should accept and display values in RGB(A) format

EcmaScript 2017 or ES8 Support

EcmaScript 2017 or ES8 was officially released a few months ago and includes async functions, static methods on Object and much more. Sencha Cmd 6.5.2 includes an upgrade to the latest Google Closure Compiler and configuration options to manage the transpiler and tune polyfill settings.

Enable ES6/ES7/ES8

We recommend developers take advantage of ES6 (and newer) versions of JavaScript. A common goal is for code to run on browsers that do not natively support ES6. To accomplish this, Sencha Cmd internally uses Google’s Closure Compiler as a transpiler.

Below is a fragment of Ext JS App Code that uses EcmaScript 2017

let extjsTools = new Set()
      extjsTools.add("Architect").add("Themer").add("Inspector")
      var pluginsLaunched = { 
jetbrains: 2015, 
eclipse: 2015, 
visualstudio: 2015, 
vscode: 2016 
}
extjsTools.add(pluginsLaunched)
for ( const tools of extjsTools)
            console.log(tools)


async function asyncFunc() {
                return extjsTools
            }
asyncFunc().then(x => console.log(x))

Enable Transpiler

By default Sencha Cmd enables all JavaScript language support as well as the transpiler, so that the compiled application can run in an ES5 browser. Even though this is the default, the following settings explicitly enable this mode:

    "language": {
        "js": {
            "input": "ES8",
            "output": "ES5"
        }
    }

The new “language” key holds settings for only the JavaScript language (“js”) at this time. The js language settings contain “input” and “output” options. By default, “input” is configured to accept all recognized syntax. With the latest Closure Compiler, this includes ES8 keywords such as async and await.

The resulting source output in browser is:

 
var a = new Set();
        a.add('Architect').add('Themer').add('Inspector');
        var d = {
            jetbrains: 2015,
            eclipse: 2015,
            visualstudio: 2015,
            vscode: 2016
        };
        a.add(d);
        for (var c = $jscomp.makeIterator(a), b = c.next(); !b.done; b = c.next()) {
            var f = b.value;
            {
                console.log(f)
            }
        }
        function asyncFunc() {
        ....

Disable Transpiler

In many cases applications require modern browsers and would therefore benefit from disabling the transpiler. This is because the code produced by the transpiler is larger (by necessity) and must emulate modern language features. To disable the transpiler, we simply set the “output” and “input” js language levels such that the output level is greater than or equal to the input level:

    "language": {
        "js": {
            "input": "ES8",
            "output": "ES8"
        }
    }

The resulting source output in browser is:

let a = new Set();
        a.add("Architect").add("Themer").add("Inspector");
        var b = {
            jetbrains: 2015,
            eclipse: 2015,
            visualstudio: 2015,
            vscode: 2016
        };
        a.add(b);
        for (const d of a)
            console.log(d);
        async function asyncFunc() {
            return a
        }
        asyncFunc().then(a=>console.log(a));

Few Other Use Cases:

Disable ES6 (no Transpiler)

For various reasons, you may decide not to enable ES6 support for an application. In this case, it is best to disable the ES6 parser to avoid accidental usage of the ES6 syntax. This is done by setting the js language input level:

    "language": {
        "js": {
            "input": "ES5"
        }
    }

With the above setting, the ES6 syntax will be reported as syntax errors during a build. This is the mode in which Ext JS itself is compiled so as not to require the transpiler (or polyfills, see below) in all applications.

Add/Remove Polyfills

A “polyfill” is a piece of code that provides missing pieces of the standard library. ES6 and newer levels of JavaScript have added numerous new methods. So where a transpiler provides missing syntax support (such as arrow functions), polyfills provide missing methods.

"production": {
        "compressor": {
            "polyfills": "all"
        }
    },

Option “all” is the safest mode for applications that make heavy use of new ES6 methods. This is also a good way to go when dynamically loading packages that may need polyfills that are not required for the application.

Option “none” removes all polyfills. It is most appropriate (and is the default) for packages, but apps may also find this useful.

Option “syntax” is appropriate for transpiled applications that want to save some space by not including implementations of new ES6+ methods. Generally this will produce the smallest amount of extra code to support ES6+ syntax.

Option “auto” has logic to determine what polyfills are needed and include only those pieces.

Try It and Share Your Feedback

We hope you enjoy building great apps with Ext JS 6.5.2 and Cmd 6.5.2. We look forward to reading your feedback in the Ext JS forum and the Sencha Cmd forum.

Show
Start building with Ext JS today

Build 10x web apps faster with 140+ pre-build components and tools.

Latest Content
Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development
Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development

Developing software without an architecture pattern may have been an option back then. However, that’s…

JavaScript Design Patterns: A Hands-On Guide with Real-world Examples
JavaScript Design Patterns: A Hands-On Guide with Real-world Examples

As a web developer, you know how popular JavaScript is in the web app development…

Virtual JS Days 2024のハイライト
Virtual JS Days 2024のハイライト

2024年2月20日~22日、第3回目となる「Virtual JavaScript Days」が開催されました。JavaScript の幅広いトピックを採り上げた数多くのセッションを実施。その内容は、Senchaの最新製品、ReExt、Rapid Ext JSまで多岐にわたり、JavaScriptの最新のサンプルも含まれます。 このカンファレンスでは多くのトピックをカバーしています。Senchaでセールスエンジニアを務めるMarc Gusmano氏は、注目すべきセッションを主催しました。Marc は Sencha の最新製品「ReExt」について、詳細なプレゼンテーションを実施。その機能とメリットを、参加者に理解してもらうべく詳細に説明しました。 カンファレンスは、Senchaのジェネラルマネージャを務めるStephen Strake氏によるキーノートでスタートしました。キーノートでは、会社の将来のビジョンについての洞察を共有しています。世界中から JavaScript 開発者、エンジニア、愛好家が集まるとてもエキサイティングなイベントとなりました。これは、JavaScript…

See More