Created
April 18, 2019 01:37
-
-
Save branflake2267/bca18e3d88b9eda34e001fd176e0c9db to your computer and use it in GitHub Desktop.
ExtAngular simple main.ts example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment