Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to ExtReact, ExtAngular and ExtWeb...

Olga
June 06, 2019

Introduction to ExtReact, ExtAngular and ExtWebComponents

Olga

June 06, 2019
Tweet

More Decks by Olga

Other Decks in Programming

Transcript

  1. Olga Petrova, @tyoushe Ext JS, React and Angular Ext JS

    Component configs items: [] Angular Component properties Children elements React Component props Children elements
  2. Olga Petrova, @tyoushe Reactor Wrapper Concept Ext JS Component props

    state method calls event listeners transform translate configs events methods link to Ext JS Component
  3. Olga Petrova, @tyoushe Architecture first and lastname React Framework Core

    Ext Modern Components Theme Packages Sencha Themer Angular Framework Sencha Test Premium Packages
  4. Olga Petrova, @tyoushe ExtReact 8 import React, { Component }

    from 'react'; import { Grid, Column } from '@sencha/ext-modern'; export default class MyGrid extends Component { store = Ext.create('Ext.data.Store', {...}); render() { return ( <Grid title="Stock Prices" store={this.store}> <Column text="Company" dataIndex="name" width="150"/> <Column text="Price" width="85" dataIndex="price" formatter='usMoney‘/> </Grid> ) } } MyGrid.js
  5. Olga Petrova, @tyoushe <container padding="10" layout="fit" [fitToParent]="true"> <grid title="Stock Prices"

    [store]="store"> <column text="Company" width="150" dataIndex="name"></column> <column text="Price" width="85" dataIndex="price" formatter="usMoney"></column> <column text="Last Updated" dataIndex="lastChange"></column> </grid> </container> ExtAngular 9 import { Component } from '@angular/core'; @Component({ selector: 'basicgrid-component‘, templateUrl: './MyGrid.html' }) export class BasicGridComponent { store = Ext.create('Ext.data.Store', {...}) constructor() { //... } } MyGrid.html MyGrid.ts
  6. Olga Petrova, @tyoushe Custom HTML Tag 17 class MyAwesomeButton extends

    HTMLElement {...} window.customElements.define('my-awesome-button', MyAwesomeButton); <my-awesome-button class="nice_style">Click me!</my-awesome-button> var myAwesomeButton = document.createElement('my-awesome-button‘); document.body.appendChild(myAwesomeButton); document.querySelector('my-awesome-button‘) .addEventListener('click', function() {...});
  7. Olga Petrova, @tyoushe <ext-panel width="100%" height="100%"> <ext-grid multiColumnSort=true onready="basicgrid.onGridReady" title="Stock

    Prices"> <ext-column text="Company" flex="1" dataIndex="name"></ext-column> <ext-column text="Price" dataIndex="price" formatter="usMoney"></ext-column> <ext-column text="Last Updated" dataIndex="lastChange"></ext-column> </ext-grid> </ext-panel> import './MyGrid.html'; export default class MyGrid { constructor() { this.store = Ext.create('Ext.data.Store', {...}); } onGridReady = (event) => { this.gridCmp = event.detail.cmp; this.gridCmp.setStore(this.store); } } ExtWebComponents 21 MyGrid.html MyGrid.js
  8. Olga Petrova, @tyoushe Getting Started 22 MyGrid.ts Early adopter access

    to ExtWebComponents Trial: https://www.sencha.com/products/extwebcomponents/evaluate/earlyaccess/
  9. Olga Petrova, @tyoushe npm login --registry=https://sencha.myget.org/F/early-adopter/npm/ --scope=@sencha npm install -g

    @sencha/ext-web-components-gen ext-web-components-gen app --name MyApp Setup 23 MyGrid.ts
  10. Olga Petrova, @tyoushe • 115+ UI Components • Layout System

    • Sencha Themer • Sencha Test • Sencha Cmd integration • Ext JS component bridge • Webpack: Build and Bundle ExtReact ExtAngular ExtWebComponents