javascriptextjsextjs6.5

ExtJS 6.5 class system


With the release of Sencha CMD and ExtJS 6.5 last week, I was very excited to use ES6 classes in my ExtJS projects. With this said, the only sort of 'documentation' I've been able to find that talks about how to implement ES6 classes in ExtJS was a this post from last October. Even though it gives an example, I think I'm missing something cause I get the following error during build process.

[ERR] C2001: Closure Compiler Error (Character '@' (U+0040) is not a valid identifier start char) -- path/to/project/Foo.js:4
[ERR] C2001: Closure Compiler Error (primary expression expected) -- path/to/projectFoo.js:4:7

Foo.js

import { define }     from 'extjs-kernel'; // module names not final
import { Observable } from 'extjs-core';

import { Base }       from 'app-some';

@define({
    mixins: Observable,
    config: {
        value: null
    }
})
export default class Foo extends Base {
    updateValue (value, oldValue) {
        this.fireEvent('valuechange', value, oldValue);
    }
}

Is there a CMD command I'm missing? If not, any further explanation would be greatly appreciated.

NOTE

My output property in app.json looks like so:

"output": {
    "base": "${workspace.build.dir}/${build.environment}/${app.name}",
    "appCache": {
        "enable": false
    },
    "js": {
        "version": "ES6"
    }
},

Solution

  • In Ext JS 6.5 and Sencha Cmd 6.5 (https://www.sencha.com/blog/announcing-ext-js-6-5-and-sencha-cmd-6-5-ga) you can use pretty much all the ES6 syntax, but support for ES6 modules is a version 7 thing.

    Source (sencha's comment from the same post you've mentioned): https://www.sencha.com/blog/ext-js-and-es201567-modernizing-the-ext-js-class-system/#comment-65507