Download - Migrating from Ext JS 3 to 4

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

1


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


2

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


3

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


4

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


MVC

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 ☺


http://seleniumhq.org

http://seleniumhq.org

http://pivotal.github.com/jasmine/

http://pivotal.github.com/jasmine/

http://docs.jquery.com/Qunit

http://docs.jquery.com/Qunit

http://funcunit.com/funcit.html

http://funcunit.com/funcit.html

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


http://www.sencha.com/forum/link_to_your_report.html

http://www.sencha.com/forum/link_to_your_report.html

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


http://ext.ensible.com/SenchaCon2010

http://ext.ensible.com/SenchaCon2010