npm package: @gusmano/ext
Description: ExtAngular for Ext JS v6.6.0
Latest version: 0.0.5

# @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: '<div>hi</div>',
    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: 'jeanluc.picard@enterprise.com', phone: '555-111-1111' },
      { name: 'ModernWorf', email: 'worf.moghsson@enterprise.com',  phone: '555-222-2222' },
      { name: 'Deanna',     email: 'deanna.troi@enterprise.com',    phone: '555-333-3333' },
      { name: 'Data',       email: 'mr.data@enterprise.com',        phone: '555-444-4444' }
    ],
  }
}