branflake2267/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
  <link href="./assets/ext.css" rel="stylesheet">
  <script type="text/javascript" src="./assets/ext.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

## main.ts


import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Component } from '@angular/core';
import { Injectable } from '@angular/core';
import { APP_INITIALIZER } from '@angular/core';

//declare Ext
declare var Ext: any

//Import Ext Angular module and dependency files
import { ExtAngularModule } from '@sencha/ext-angular'
//import { ExtAngularBootstrapService } from '@sencha/ext-angular/esm5/lib/ext-angular-bootstrap.service'
//import { ExtAngularBootstrapComponent } from '@sencha/ext-angular/esm5/lib/ext-angular-bootstrap.component'


declare var Ext: any;

@Component({
    selector: 'app-root',
    styles: [`
            `],
    template: `
        <container #item padding="10">
            <button #item
                text="Say Hello"
                [handler]="this.sayHello"
                ui="action raised"
            ></button>
            <button  #item
                text="Say Goodbye"
                [handler]="this.sayGoodbye"
            ></button>
            <div #item>
            {{ this.message }}
            </div>
        </container>
            `
})
export class AppComponent {
    constructor() {
        console.log("AppComponent initialized...");
    }

    message: string;

    sayHello = () => {
        this.message = 'Hello world!';
    }

    sayGoodbye = () => {
        this.message = 'Goodbye cruel world.';
    }
}


var extLaunchFactory = () => {
    return () => new Promise<void>((resolve, reject) => {
        console.log("Loading Ext JS...");
        Ext.application({
            name: "$ExtAngularApp",
            quickTips: true,
            launch: () => {
                // Ext JS has Loaded, ready to continue
                setTimeout(() => {
                    console.log("Ext has loaded...");
                    resolve();
                }, 1000);
            }
        })
    });
}

var ExtAppInitLaunchProvider = { provide: APP_INITIALIZER, useFactory: extLaunchFactory, deps: [], multi: true };

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule, ExtAngularModule
    ],
    providers: [
        ExtAppInitLaunchProvider,
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>MyApp</title>
	<base href="/">

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" type="image/x-icon" href="favicon.ico">

	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
	<link href="./assets/ext.css" rel="stylesheet">
	<script type="text/javascript" src="./assets/ext.js"></script>
	</head>
	<body>
	<app-root></app-root>
	</body>
	</html>


	import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

	import { BrowserModule } from '@angular/platform-browser';
	import { NgModule } from '@angular/core';
	import { Component } from '@angular/core';
	import { Injectable } from '@angular/core';
	import { APP_INITIALIZER } from '@angular/core';

	//declare Ext
	declare var Ext: any

	//Import Ext Angular module and dependency files
	import { ExtAngularModule } from '@sencha/ext-angular'
	//import { ExtAngularBootstrapService } from '@sencha/ext-angular/esm5/lib/ext-angular-bootstrap.service'
	//import { ExtAngularBootstrapComponent } from '@sencha/ext-angular/esm5/lib/ext-angular-bootstrap.component'


	declare var Ext: any;

	@Component({
	selector: 'app-root',
	styles: [`
	`],
	template: `
	<container #item padding="10">
	<button #item
	text="Say Hello"
	[handler]="this.sayHello"
	ui="action raised"
	></button>
	<button #item
	text="Say Goodbye"
	[handler]="this.sayGoodbye"
	></button>
	<div #item>
	{{ this.message }}
	</div>
	</container>
	`
	})
	export class AppComponent {
	constructor() {
	console.log("AppComponent initialized...");
	}

	message: string;

	sayHello = () => {
	this.message = 'Hello world!';
	}

	sayGoodbye = () => {
	this.message = 'Goodbye cruel world.';
	}
	}




	var extLaunchFactory = () => {
	return () => new Promise<void>((resolve, reject) => {
	console.log("Loading Ext JS...");
	Ext.application({
	name: "$ExtAngularApp",
	quickTips: true,
	launch: () => {
	// Ext JS has Loaded, ready to continue
	setTimeout(() => {
	console.log("Ext has loaded...");
	resolve();
	}, 1000);
	}
	})
	});
	}

	var ExtAppInitLaunchProvider = { provide: APP_INITIALIZER, useFactory: extLaunchFactory, deps: [], multi: true };

	@NgModule({
	declarations: [
	AppComponent
	],
	imports: [
	BrowserModule, ExtAngularModule
	],
	providers: [
	ExtAppInitLaunchProvider,
	],
	bootstrap: [
	AppComponent
	]
	})
	export class AppModule { }

	platformBrowserDynamic().bootstrapModule(AppModule);