ExtTS

Writing ExtJS application with TypeScript

Checkout HelloWorld.ts

To define a ViewController in TypeScript:

// Define a controller, we suppose to write most of logic code in controller
@ExtJS.controller({
    // definition of the view for the controller
    // By default, view extend Ext.container.Container
    // You can also provide 'extend' in it ot extend other component
    view: {
        alias: 'testExtTS',
        items: [
            {
                xtype: 'combo',
                fieldLabel: 'Choose State',
                queryMode: 'remote',
                displayField: 'name',
                minChars: 1,
                queryParam: 'name',
                valueField: 'abbr',
                bind: {
                    store: '{serverStates}'
                }
            },
            {
                xtype: "button",
                handler: 'SayHello',
                reference: 'sayHelloButton',
                bind: {
                    text: 'Name: {user.firstName}',
                }
            }
        ]
    }
})
export class HelloWorld extends Ext.app.ViewController {

    // automatically create a view model that has user property

    @ExtJS.viewModelProperty() user: User;
    @ExtJS.viewModelProperty() states: Ext.data.Store;
    @ExtJS.asStore()
    quickStates;
    _states: State[];
    @ExtJS.referenceFrom() sayHelloBtn: Ext.button.Button;

    // because of ExtjS legacy class system, we have to use default constructor.
    initViewModel(): void {
        this.user = new User('OldName');
        this.states = ExtJS.createStore([
            {name: 'A', abbr: 'a'},
            {name: 'Georgia', abbr: 'GA'}
        ]);
        this.quickStates = this._states = [
            ExtJS.create(State, {name: 'A', abbr: 'a'}),
            ExtJS.create(State, {name: 'Georgia', abbr: 'GA'})
        ];
        ExtJS.wireUp(this);
        console.log(this.sayHelloBtn.getId());
    }

    public SayHello(): void {
        // new way to updating view model
        this.user.firstName = "NewName";

        // update view model in legacy way
        this.getViewModel().set('user.firstName', 'VeryNewName'); 

        // dynamically add an item to a container
        const btn = ExtJS.create(Ext.button.Button, { text: 'tsts'});
        const container = this.getView() as Ext.Container;
        container.add(btn);
    }

    @ExtJS.storeRead(State, 'serverStates')
    loadStates(params) : Promise<{data: State[], total?:number}> {
        let data = this._states;

        if( params.params && params.params.name) {
            data = data.filter( d => d['name'].startsWith(params.params.name));
        }

        return Promise.resolve({data });
    }
}

Will add test code later.

Folder structure

./app           All ExtJS code
./src           All TypeScript code
./ext           ExtJS Framework, .gitignored
main.ts         webpack main

How to adopt this, assume you already have Sencha ExtJS

1. Install NodeJS
2. Install Typescript and WebPack, all defined in package.json
3. npm i -g extjs_ts
4. Initialize ExtTS by 'extts init' in workspace folder.
5. In VS Code, you can start a "npm run-script watch" to watch typescript code change and make webpackoutput.js. Then start a new terminal, run "sencha app watch".

ExtJS declarations

Since Sencha ExtJS doesn't provide any declaration files, here is a simple generator, which can help a bit. It generates functions, including static and private ones. But the generated declaration doesn't have function document, and parameter type, return type are all "any", for now. Here is the generator: ./src/ext-tool/generator.ts. You can generate a class and its dependencies by CLI:

extts generate Ext.app.ViewController ./src/ext-lib -- -replace

TODO

1. Production mode build haven't been tested.
2. Test code not writte, and should have started at the beginning.

Notes

I am not an expert of Sencha ExtJS. I hope this can help a bit if you have to stuck with ExtJS but want to write typescript code.