Migrating from Ext JS 3 to 4

PRESENTATION NAME
Ext JS 3 ➟ 4 MIGRATION
Brian Moeskau, Sencha @bmoeskau
Mats Bryntse, Bryntum @bryntum

Wednesday, November 2, 11

Brian Moeskau
@bmoeskau
Cofounded Ext JS
Founded Extensible
Created Ext Calendar Pro

Mats Bryntse
@bryntum
Founded Bryntum
Created Ext Scheduler & Ext Gantt


Overview

Why Compatibility?
Migration Strategy: The Four R’s
For Component Makers
Tips & 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 Strategy
The Four R’s

1

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 Components
The 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);
}
bar: function(){
// etc.
}
});


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


Be Bold
Take a hatchet to it!
Simplify the app entry point
Start simple, build on each success


2
Get it...

Running
Rendered


Fix Runtime Errors
Element.child ⬄ Element.down
Fix deprecated properties
Exceptions not covered by the compat layer


Big “Pattern” Changes
New class system
deﬁne / extend / alias

Data package
models, new proxies, associations

Grid
subclasses ➟ features

Tree
loader / node ➟ store / model


3
Get it...

“Right”
Rendered
Running


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

Conﬁg / method / event renames
myEl.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, or
Document the problem / fix, or
Add the fix to the compat layer (and share!)


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

Teams / distributed development
Not 100% sure about some ﬁxes
More easily spot regressions
Post-migration assessment
Documentation for migration #2


4

Get it...

Refactored
Rendered
Running
Right

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

// Set up top-level dependencies
Ext.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’s
Still Apply!


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

Review existing overrides for validity
Store / Record

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


Get it Rendered
Fix 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 Running
Focus close to core / parent class
Basic grid

Add in feature by feature
Column 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 Refactored
Embrace the 4.0 class system
js/sch.plugins.lines.js ➟ js/plugin/Lines.js

Review code / class structure


Get it Refactored
Never a better time to start unit testing!

Find bugs earlier
Bugs never happen twice unnoticed
Spend less time bug-hunting


Get it Refactored
Selenium
http://seleniumhq.org

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

Qunit
http://docs.jquery.com/Qunit

FuncUnit
http://funcunit.com

Siesta
Coming soon ☺


More details on the blog


Tips & Tricks


Choosing a Browser
Chrome === Fast
Firebug for best general debugging
Illuminations for Ext-speciﬁc debugging
IE for... IE veriﬁcation ;)


Firebug
“Unresponsive script” error:
about:conﬁg > dom.max_script_run_time

Blank console? Switch to Chrome.

“Reboot” the browser regularly


Document Fixes
When overriding private code, document well!

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

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


Link Patches
When 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 thrown
Ext.panel.Table.override({
scrollByDeltaX: function(deltaX) {
var horizontalScroller =
this.getHorizontalScroller();
if (horizontalScroller) {
horizontalScroller.scrollByDeltaX(deltaX);
}
}
});


Useful Compat Settings
Ext.Compat.silent

Ext.Compat.showErrors

?COMPAT_DEBUG=1


Reading the Stack Trace
For compat debugging, ﬁnd the ﬁrst 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

Recommended

Recommended

More Related Content

More from Sencha

More from Sencha (20)

Recently uploaded

Recently uploaded (20)

Migrating from Ext JS 3 to 4