Migrating from Ext JS 3 to 4

transcript

Wednesday, November 2, 11

PRESENTATION NAME

Brian Moeskau, SenchaMats Bryntse, Bryntum

@bmoeskau@bryntum

Ext JS 3 ➟ 4 MIGRATIONWednesday, November 2, 11

Brian Moeskau@bmoeskauCofounded Ext JSFounded ExtensibleCreated Ext Calendar Pro

Mats Bryntse@bryntumFounded BryntumCreated Ext Scheduler & Ext Gantt

Overview

Why Compatibility?Migration Strategy: The Four R’s

For Component MakersTips & Tricks

Why Compatibility?

The Compat Layer Is...A temporary shim for Ext 3.0+

Minimizes “blind” debugging

A smart migration assistant

Migrate in a controlled manner

The Compat Layer Is NOT...A magic bullet

A long-term solution

100% Ext 4.0 API coverage

Quite as helpful for heavily overridden components

without compatibility...

with compatibility...

without compatibility...

Uncaught TypeError: Object #<Object> has no method 'reg'

with compatibility...

[DEPRECATED][4.0][Ext] reg: Calling a separate function to register custom types is no longer necessary. Switch your class definition to use Ext.define with "widget.migration-navtree" as the alias config.

Migration StrategyThe Four R’s

Get it...

Rendered

Install the Compat Layer

<script src="path/to/ext-all-debug.js"></script>

<script src="path/to/ext3-core-compat.js"></script><script src="path/to/ext3-compat.js"></script>

<script src="myApp.js"></script>

Incompatible ComponentsThe compat layer will not help with:

Charts

PivotGrid

Calendar added in 4.1!

Fix Old Constructors

// 2.x syntax, BAD:Ext.ux.Foo = function(config){ Ext.apply(this, config); Ext.ux.Foo.superclass.constructor.call(this); // more constructor logic}Ext.extend(Ext.ux.Foo, Ext.Component, { bar: function(){ // etc. }});

// 3.x syntax, better:Ext.ux.Foo = Ext.extend(Ext.Component, { constructor: function(config){ Ext.ux.Foo.superclass.constructor.call(this); // more constructor logic } bar: function(){ // etc. }});

// 4.0 syntax, best:Ext.define('Ext.ux.Foo', { extend: 'component', constructor: function(config){ this.callParent(arguments); // more constructor logic }, bar: function(){ // etc... }});

Be BoldTake a hatchet to it!

Simplify the app entry point

Start simple, build on each success

Get it...

Running

Rendered

Fix Runtime ErrorsElement.child ⬄ Element.down

Fix deprecated properties

Exceptions not covered by the compat layer

Big “Pattern” ChangesNew class systemdefine / extend / alias

Data packagemodels, new proxies, associations

Gridsubclasses ➟ features

Treeloader / node ➟ store / model

Get it...

Right”“RenderedRunning

Clean Up the ConsoleDate, Function, String, ArraymyDate.format(‘Y-m-d’) ➟ Ext.Date.format(myDate, ‘Y-m-d’)

Config / method / event renamesmyEl.addClass(‘foo’) ➟ myEl.addCls(‘foo’)

Method / event argument changes[tool] handler: function(evt, el, panel) ➟ (evt, el, header)

Make Changes in Bulk“Find-and-fix” (not replace)

If you figure out a difficult fix...Locate other instances immediately, orDocument the problem / fix, orAdd the fix to the compat layer (and share!)

Consider “Soft” FixesConsider commenting out rather than replacing code:

Teams / distributed developmentNot 100% sure about some fixesMore easily spot regressionsPost-migration assessmentDocumentation for migration #2

RenderedRunningRight

Get it...

Refactored

Dynamic Loading

// Enable dynamic loadingExt.Loader.setConfig({enabled: true});Ext.Loader.setPath('Ext.migration', 'migration/');

// Set up top-level dependenciesExt.require([ 'Ext.migration.App']);

Ext.onReady(function(){ // Launch the app Ext.create('Ext.migration.App').init();});

Mixins

Ext.define('Ext.AbstractComponent', { mixins: { observable: 'Ext.util.Observable', animate: 'Ext.util.Animate', elementCt: 'Ext.util.ElementContainer', renderable: 'Ext.util.Renderable', state: 'Ext.state.Stateful' }, ...});

Form Layouts

Ext.application({ name: 'Pandora', autoCreateViewport: true, models: ['Station', 'Song'],

stores: ['Stations', 'RecentSongs'],

controllers: ['Station', 'Song']});

For Component Makers

“The compatibility layer is not quite as helpful

for heavily overridden components”

but...

The Four R’sStill Apply!

Get it RenderedStep 0: Understand your base / parent class (well)Grid and Tree

Review existing overrides for validityStore / Record

Review Ext CSS class usage“.ext-ie” ➟ “.x-ie”

Get it RenderedFix custom component registration

// 3.x:Ext.reg('myclass', Ext.ux.MyClass);

// 4.0 (temporary):Ext.reg('myclass', 'Ext.ux.MyClass');

// 4.0 (ultimate fix):Ext.define('Ext.ux.MyClass', { alias: 'widget.myclass', // etc.});

Get it RunningFocus close to core / parent classBasic grid

Add in feature by featureColumn locking, grouping, editing

Get it “Right”Use mixins for easier reusability

Ext.define("Sch.data.EventStoreAdaptions", { adaptEventStore : function() { this.insert = this.modifiedInsert; this.remove = this.modifiedRemove; }, modifiedInsert : function() { // etc. }, modifiedRemove : function() { // etc. }});

Get it “Right”Future-proof your CSS classes

// Instead of overriding Ext CSS....x-grid-row-over { background: #eee;}

Get it “Right”Future-proof your CSS classes

// Add your own rules:.mygrid-itemover { background: #eee;}

Ext.define('MyGrid', { extend: 'Ext.grid.Panel', viewConfig: { overItemCls: 'mygrid-itemover' }});

Get it RefactoredEmbrace the 4.0 class systemjs/sch.plugins.lines.js ➟ js/plugin/Lines.js

Review code / class structure

Get it RefactoredNever a better time to start unit testing!

Find bugs earlierBugs never happen twice unnoticedSpend less time bug-hunting

Get it RefactoredSeleniumhttp://seleniumhq.org

Jasminehttp://pivotal.github.com/jasmine

Qunithttp://docs.jquery.com/Qunit

FuncUnithttp://funcunit.com

SiestaComing soon ☺

More details on the blog

Tips & Tricks

Choosing a BrowserChrome === Fast

Firebug for best general debugging

Illuminations for Ext-specific debugging

IE for... IE verification ;)

Firebug“Unresponsive script” error:about:config > dom.max_script_run_time

Blank console? Switch to Chrome.

“Reboot” the browser regularly

Document FixesWhen overriding private code, document well!

Ext.define('Ext.ux.MyGrid', { extend: 'Ext.grid.Panel', constructor: function(config){ this.callParent(arguments);

// HACK / NOTE / TODO: // Reading private member scrollerOwner if (this.scrollerOwner) { ... } }});

Link PatchesWhen patching, link to the bug report

// http://www.sencha.com/forum/link_to_your_report.html// 1. Render a basic grid panel// 2. Call grid.scrollByDeltaX(100)// 3. Verify no exception is thrownExt.panel.Table.override({ scrollByDeltaX: function(deltaX) { var horizontalScroller = this.getHorizontalScroller(); if (horizontalScroller) { horizontalScroller.scrollByDeltaX(deltaX); } }});

Useful Compat SettingsExt.Compat.silent

Ext.Compat.showErrors

?COMPAT_DEBUG=1

Reading the Stack TraceFor compat debugging, find the first application error

“But I Can’t Migrate X!”Sandbox with Ext 4

Build your own compatibility layer

Wrap with IFrames

Ideally, everything should be migrated.

Realistically, do whatever makes sense for you.

Need Additional Help?

Thanks!

Blog post / Migration Guide / Screencasts

http://bit.ly/3-to-4

@bmoeskau@bryntum

Migrating from Ext JS 3 to 4

Technology