Add switch to turn off check for ExtJs feature

Topics: General
Nov 1, 2012 at 8:15 AM

I have encountered 2 problems when using TypeScript with ExtJS:
1. It flag say Ext does not exist in the current context.

2. The following is ok with ExtJs but not with TypeScript.. it says incompatible types in the array.
 items: [{
            fieldLabel: 'Update',
            name: 'x',
            xtype: 'hidden'
        }, {
            fieldLabel: 'F1 Caption',
            name: 'F1',
            enforceMaxLength: true,
            maxLength: 50,
            readOnly: true,
            allowBlank: false,
            fieldCls: 'required'
        },

The first I can set a variable to override.  The second I wish there were a switch to just ignore so that I could get my javascript generated on the right.

Nov 1, 2012 at 10:20 AM
Edited Nov 1, 2012 at 10:25 AM

1 -  You need to create a declaration file for ExtJS. there is a project on Github todo this:

https://github.com/zz9pa/extjsTypescript

one small example:

 

 

declare module Ext {

    export class Panel {
        constructor ();
        width: number;
        height: number;
        title: string;
        items: any[];
        initComponent();
        render(target : Node);
    }

    export var version: string;
    export function onReady(fn: Function);
    export function onReady(fn: Function, scope:any);
}

 

2 - items should be declared as any[]

 

 

///<reference path="../lib/ExtJS/ExtJS.d.ts" />

class Panel extends Ext.Panel   { 
    initComponent() { 
    
        this.items = [{
            fieldLabel: 'Update',
            name: 'x',
            xtype: 'hidden'
        }, {
            fieldLabel: 'F1 Caption',
            name: 'F1',
            enforceMaxLength: true,
            maxLength: 50,
            readOnly: true,
            allowBlank: false,
            fieldCls: 'required'
        }];
        super.initComponent();
    }

}

 

You also need declare properties like "title" on constructor or initComponent. If you declare like following pattern it will not work:

 

class Panel extends Ext.Panel   { 
    title = 'myPanel';
}

var Panel = (function (_super) {
    __extends(Panel, _super);
    function Panel() {
        _super.apply(this, arguments); // problem is here: calling Ext.Panel constructor before setting title

        this.title = 'myPanel';
    }
    return Panel;
})(Ext.Panel);

Nov 2, 2012 at 4:29 AM

Thank-you.

I checked out the project but it errors when I try to convert ext-all.js 4.1.1.  Looks like it will take more work than I am able to give it.

Wish that there were pre-converted list of files that one could download... like for ext-all.js download ext-all.ts

 

Jan 28, 2013 at 7:51 AM

I have just put together a blog on using ExtJs with TypeScript:

http://blorkfish.wordpress.com/2013/01/28/using-extjs-with-typescript/

This of course is just my experience trying to get ExtJs code compiled and runnable with TypeScript.

Have fun.

Jul 17, 2014 at 5:24 PM
Hi, I created a custom compiler for ExtJS. I'm going to be using it on several projects, and so I'll try to keep it up to date. It has a definition file for ExtJS 5 and the compiler will infers more of the ExtJs conventions and thus helps out more with intelisense when writing code. For example you can tell the compiler to infer a configuration interface that you can use to pass to the constructor, and then you get help when calling the constructor. Since the typescript language service can be changed for visual studio by changing the typescriptServices.js the changes are available right from Visual Studio.

https://typescript4extjs.codeplex.com/