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

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

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?

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

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

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

Demo –
a simple Angular 2 component

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…

@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'}
]
}
};
}
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

@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);}
}
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

Demo –
Ext JS Grid in Angular 2

@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)

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

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

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

More Related Content

What's hot (20)

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

More from Sencha (20)

Recently uploaded (20)

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