Want to Use Ext JS Components with
Angular 2?
Here’s How to Increase the Power
of Your Apps!
Marc Gusmano
Senior Sales Eng...
Have you ever wished you could use Sencha’s powerful Ext JS components in your
Angular 2 apps? Now you can. Learn about th...
So What is the Angular 2 Bridge for Ext JS?
• Enables the use of Ext JS Components, Layouts, Ext JS Classes within Angular...
Starter Options for an Angular 2 Application
• Angular.io – getting started https://angular.io/docs/ts/latest/quickstart.h...
Demo –
Angular-cli
import { Component } from '@angular/core';
@Component({
selector: 'simple',
template: `
<h1>{{title}}</h1>
<button
class="...
Demo –
a simple Angular 2 component
if (o.alias != undefined &&
o.alias.substring(0, 6) == 'widget' &&
o.alias.substring(7).indexOf('.') == -1 &&
o.alias.inde...
import { Component } from '@angular/core';
@Component({
selector: '',
styles: [``],
template: `
<x-grid fitToParent=true
[...
import { Component } from '@angular/core';
@Component({
selector: '',
styles: [``],
template: `
<x-grid fitToParent=true
[...
Demo –
Ext JS Grid in Angular 2
@Component({
selector: '',
styles: [``],
template: `
<x-container fitToParent=true [layout]="'vbox'">
<x-panel [margin]="'...
import {xclass} from 'angular2-extjs';
export class SalesStore extends xclass {
constructor (createConfig: any) {
let clas...
Demo –
An Angular 2 app with Ext
JS
• Angular-cli starter
• Angular-cli application with Ext JS
15
Development and Production payloads
Development and Production payloads
Q & A
Question & Answer Session
SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to Increase the Power of Your Apps! - Marc Gusmano
Upcoming SlideShare
Loading in …5
×

SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to Increase the Power of Your Apps! - Marc Gusmano

47 views

Published on

Have you ever wished you could use Sencha’s powerful Ext JS components in your Angular 2 apps? Now you can. Learn about the new bridge we’ve created that enables you to use the Ext JS grid, treegrid, pivot grid, calendar, charts, and other components in your Angular 2 based apps.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
47
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to Increase the Power of Your Apps! - Marc Gusmano

  1. 1. Want to Use Ext JS Components with Angular 2? Here’s How to Increase the Power of Your Apps! Marc Gusmano Senior Sales Engineer marc.gusmano@sencha.com
  2. 2. Have you ever wished you could use Sencha’s powerful Ext JS components in your Angular 2 apps? Now you can. Learn about the new bridge we’ve created that enables you to use the Ext JS grid, treegrid, pivot grid, calendar, charts, and other components in your Angular 2 based apps. We’ve integrated the frameworks, so Ext JS components recognize the Angular 2 directives and appropriately respond to events. If you’re an Angular 2 user, there is no reason why you can’t use it to assemble the basic building blocks of an app and then add the powerful Ext JS components to complete your data-centric, cross- platform applications. Come to this session to learn how to build a data-intensive, cross-platform app with Ext JS 6.2 and Angular 2. 2 What Will We Be Doing?
  3. 3. So What is the Angular 2 Bridge for Ext JS? • Enables the use of Ext JS Components, Layouts, Ext JS Classes within Angular 2 • Currently in Preview (no code available yet) • Still need tooling (Sencha Cmd support) • Works with Modern Toolkit • Uses Ext JS Theme (no tooling currently) • We need your feedback on this! marc.gusmano@sencha.com 3
  4. 4. Starter Options for an Angular 2 Application • Angular.io – getting started https://angular.io/docs/ts/latest/quickstart.html • Angular-cli https://cli.angular.io/ • Reddit – helpful GitHub repos https://www.reddit.com/r/Angular2/ 4
  5. 5. Demo – Angular-cli
  6. 6. import { Component } from '@angular/core'; @Component({ selector: 'simple', template: ` <h1>{{title}}</h1> <button class="theButton" [disabled]="isDisabled" (click)="onClick($event)"> {{title}} </button> `, styles: [` .theButton { font-size: 32px; } `] }) export class SimpleComponent { title = 'app works!'; isDisabled = false; private onClick(event) { console.log(event) this.title = 'I was clicked and disabled'; this.isDisabled = true; } } An Angular2 Component using TypeScript (Angular 2 – 101) • import • @component - selector, template, styles - templateUrl, stylesUrl • export class • [name] is syntax for a property • (name) is syntax for an event • {{name}} is binding syntax
  7. 7. Demo – a simple Angular 2 component
  8. 8. if (o.alias != undefined && o.alias.substring(0, 6) == 'widget' && o.alias.substring(7).indexOf('.') == -1 && o.alias.indexOf('actionsheet') == -1 && o.alias.indexOf('audio') == -1 && o.alias.indexOf('axis') == -1 && o.alias.indexOf('carouselindicator') == -1 && o.alias.substring(7).indexOf('item') == -1 && o.alias.substring(7).indexOf('cell') == -1 && o.alias.substring(7).indexOf('column') == -1 && o.alias.substring(7).indexOf('row') == -1 && o.alias.substring(7).indexOf('sparkline') == -1 && o.alias.substring(7).indexOf('pivotconfig') == -1 && o.alias.indexOf(',') == -1 ) 8 All ‘primary’ Visual Components, except for…
  9. 9. import { Component } from '@angular/core'; @Component({ selector: '', styles: [``], template: ` <x-grid fitToParent=true [config]="gridConfig"> </x-grid> ` }) export class BridgeHomeComponent { gridConfig= { title: 'Bridge Home', columns: [ {text:'Name', width:100, dataIndex:'name'}, {text:'Email Address', flex:1, dataIndex:'email'}, {text:'Phone Number', width:150, dataIndex:'phone'} ], store: { fields: ['name', 'email', 'phone'], data: [ {name:'Lisa', email:'lisa@simpsons.com', phone:'555-111-1224'}, {name:'Bart', email:'bart@simpsons.com', phone:'555-222-1234'}, {name:'Homer', email:'homer@simpsons.com', phone:'555-222-1244'}, {name:'Marge', email:'marge@simpsons.com', phone:'555-222-1254'} ] } }; } An Angular2 Component that uses the Ext JS Grid • x- is the prefix for an Ext JS component • Following the x- is the xtype (x-grid) • General property called [config] - All components have this property • Also all have fitToParent property • Also all have (ready) event
  10. 10. import { Component } from '@angular/core'; @Component({ selector: '', styles: [``], template: ` <x-grid fitToParent=true [columns]="gridcolumns" [store]="gridstore" (select)="onGridSelect($event)" (activate)="onGridActivate($event)" (ready)="gridReady($event)"> </x-grid> ` }) export class BridgeHomeComponent { gridcolumns = [ {text:'Name', width:100, dataIndex:'name'}, {text:'Email Address', flex:1, dataIndex:'email'}, {text:'Phone Number', width:150, dataIndex:'phone'} ]; gridstore = { fields: ['name', 'email', 'phone'], data: [ {name:'Lisa', email:'lisa@simpsons.com', phone:'555-111-1224'}, {name:'Bart', email:'bart@simpsons.com', phone:'555-222-1234'}, {name:'Homer', email:'homer@simpsons.com', phone:'555-222-1244'}, {name:'Marge', email:'marge@simpsons.com', phone:'555-222-1254'} ] }; private onGridSelect({record}) {alert(record.data.name);} private onGridActivate(event) {console.log(event);} private onGridReady(theGrid) {console.log(theGrid.x);} } An Angular2 Component that uses the Ext JS Grid • All components have an Angular 2 property for each Ext JS config - For example: [columns] • All events are also available - For example: (select) • (ready) event is used to extract the underlying Ext JS component - Available as the ‘x’ property of the passed parameter
  11. 11. Demo – Ext JS Grid in Angular 2
  12. 12. @Component({ selector: '', styles: [``], template: ` <x-container fitToParent=true [layout]="'vbox'"> <x-panel [margin]="'20 20 20 20'" [title]="header"> <x-selectfield [config]="selectfieldConfig" [options]='selectfieldOptions' (change)='onSelectfieldSelect($event)'> </x-selectfield> </x-panel> <x-pivotgrid [flex]="'1'" [title] ='pivotTitle' [config]='pivotgridConfig' (ready)="readyPivotGrid($event)" (pivotdone)="onPivotgridPivotDone($event)"> </x-pivotgrid> <x-cartesian [flex]="'1'” [config]='cartesianConfig' (ready)="readyCartesian($event)"> </x-cartesian> </x-container> ` }) Using the Ext JS Layout System • vbox, hbox, flex, etc. • Containment (the ‘items’ collection)
  13. 13. import {xclass} from 'angular2-extjs'; export class SalesStore extends xclass { constructor (createConfig: any) { let className: any = 'SalesStore'; let extend: any = 'Ext.data.ArrayStore'; let defineConfig: any = { alias: 'store.sales', autoLoad: true, proxy: { type: 'ajax', url: 'assets/sales.json', reader: { type: 'json', rootProperty: 'rows' } }, filters: [ function(item) { return item.get('year') >= 2012; } ], fields: [ {name: 'orderid', type: 'int'}, {name: 'salesperson', type: 'string'}, {name: 'country', type: 'string'}, {name: 'orderdate', type: 'date', dateFormat: 'd/m/Y'}, {name: 'amount', type: 'int'} ] }; super(className, extend, defineConfig, createConfig); return; } } Creating non-visual components (like stores and models) • Import ‘xclass’ • Extend ‘xclass’ • Populate ‘className’ • Populate ‘extend’ • Populate 'defineConfig’ • Call the ‘xclass’ base class
  14. 14. Demo – An Angular 2 app with Ext JS
  15. 15. • Angular-cli starter • Angular-cli application with Ext JS 15 Development and Production payloads
  16. 16. Development and Production payloads
  17. 17. Q & A Question & Answer Session

×