@gusmano/ext

ExtAngular for Ext JS v6.6.0

• create a project with Angular Cli https://www.npmjs.com/package/@angular/cli
• cd to created project
• run: npm i --save @gusmano/ext
• in angular.json

replace:

"styles": [ "src/styles.css" ], "scripts": []

with this:

"styles": [ "src/styles.css", "src/ext/modern/theme-material/resources/theme-material-all.css" ], "scripts": [ "src/ext/ext-modern-all.js" ]

add this to app.module.ts:

import { ExtComponent } from '@gusmano/ext'

replace this in app.module.ts:

declarations: [ AppComponent ],

with this:

declarations: [ ExtComponent, AppComponent ],

replace app.component.ts with this:

import { Component } from '@angular/core';

@Component({ selector: 'app-root', template: `

<ext-component [xtype]="'panel'" [config]="panelConfig">
  <ext-component [xtype]="'container'" [config]="containerConfig"></ext-component>
  <ext-component 
    [xtype]="'button'"
    [config]="buttonInConfig"
    (tap)="onButtonTap($event)"
    (ready)="onButtonReady($event)"
  ></ext-component>
  <ext-component 
    [xtype]="'grid'"
    [config]="gridConfig"
    (select)="onGridSelect($event)"
    (ready)="onGridReady($event)"
  ></ext-component>
</ext-component>


<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>

`, styles: [] }) export class AppComponent { button: any grid: any

private onButtonReady(ext) { this.button = ext } private onGridReady(ext) { this.grid = ext } private onGridSelect(parms) { console.log(parms.grid) console.log(parms.selected[0].data) } private onButtonTap(parms) { this.grid.setTitle(Date.now()) } title = 'app'; buttonInConfig = { text: 'Click Me in', height: 40, width: 150 } panelConfig = { title: 'panel', layout: 'vbox', height: 400, width: '100%' } containerConfig = { html: 'hi', height: 20, width: 20 } gridConfig = { title: 'Personnel', height: 300, width: '100%', columns: [ {text: 'Name',dataIndex: 'name',width: 100}, {text: 'Email',dataIndex: 'email',flex: 1}, {text: 'Phone',dataIndex: 'phone',width: 150} ], data: [ { name: 'Jean Luc', email: '[email protected]', phone: '555-111-1111' }, { name: 'ModernWorf', email: '[email protected]', phone: '555-222-2222' }, { name: 'Deanna', email: '[email protected]', phone: '555-333-3333' }, { name: 'Data', email: '[email protected]', phone: '555-444-4444' } ], } }