Migrating from Touch 1.x to 2.0

MIGRATING TO TOUCH 2
Jamie Avins

@jamieavins

Wednesday, November 2, 2011

Rendering


Rendering in Touch 2
Touch 1 combinedthis process into two distinct pieces
Touch 2 splits Element creation and DOM placement

Creation
Placement


The Element Creation process is now part of Component
instantiation

The Elements initially exist outside the DOM

You don’t want measure elements until they enter the DOM


Touch 1 stored a DOM markup on the prototype

Touch 2 stores a DOM element on the prototype

element.cloneNode(true) for all instances


Adding a Component to a Container will move its elements
inside the DOM - ﬁres the ‘painted’ event

Removing a Component from a Container will move its elements
outside the DOM - ﬁres the ‘erased’ event

Component.show() will place the Component in the ViewPort


Being able to ‘erase’ components from the DOM and using
clean conﬁgurations allows the recycling of components
for (; i >= 0; i--) {
item = items[from + i];
if (cacheLn !== maxItemCache) {
me.remove(item, false);
item.removeCls([me.getPressedCls(), me.getSelectedCls()]);
itemCache.push(item);
cacheLn++;
}
else {
item.destroy();
}
}


Being able to ‘erase’ components from the DOM and using
clean conﬁgurations allows the recycling of components
for (; i < ln; i++) {
record = records[i];
if (cacheLn) {
cacheLn--;
item = itemCache.pop();
item.setRecord(record);
items.push(item);
}
else {
items.push(me.getDataItemConfig(xtype, record, itemConfig));
}
}


Unsupported Methods:
render
afterRender

The ‘render’ event is slated for deprecation


CSS Layouts


Layouts in Touch 2
Layouts are now completely CSS Based


Layouts in Touch 2
Layouts are now completely CSS Based
.x-layout-hbox, .x-layout-vbox {
.x-layout-card { display: -webkit-box;
> * { .x-docking-horizontal {
position: relative;
-webkit-box-flex: 0; display: -webkit-box;
overflow: hidden;
} -webkit-box-flex: 1;
} -webkit-box-orient: horizontal;
> .x-layout-card-item {
min-width: 100%;
position: absolute !important;
.x-layout-hbox { min-height: 100%;
width: 100%;
-webkit-box-orient: horizontal; }
height: 100%;
}
} > .x-layout-box-item {
.x-layout-fit {
width: 0 !important;
position: relative;
.x-docking-vertical { }
display: -webkit-box;
display: -webkit-box; }
-webkit-box-flex: 1; > * {
-webkit-box-orient: vertical; .x-layout-vbox {
-webkit-box-flex: 1;
min-width: 100%; -webkit-box-orient: vertical;
min-width: 100%;
min-height: 100%; min-height: 100%;
} > .x-layout-box-item {
}
height: 0 !important;
}
}
}


Layouts in Touch 2
Place elements in the appropriate DOM location

Apply CSS Layout classes

Apply layout conﬁgurations such as pack, ﬂex, align, etc.

Wrap components for docking and centering


Layouts in Touch 2
Unsupported Methods:
doLayout
doComponentLayout
afterLayout


Layouts in Touch 2
Without afterLayout, how can you detect size changes?
Scroller
NavigationBar
Slider
DrawComponent


Layouts in Touch 2
Without afterLayout, how can you detect size changes?
Scroller
NavigationBar
Slider
DrawComponent

new Ext.util.SizeMonitor({
element: this.element,
callback: this.onSizeChange,
scope: this
});


Layouts in Touch 2
How does SizeMonitor work? Target Element

Add two absolutely
Detect Shrinking
positioned elements with
scroll listeners

If position and scroll don’t
match, we run our callback Detect Expanding


Layouts in Touch 2
Docking moved to Container


Layouts in Touch 2
Docking moved to Container

Remove Panel overnesting

Removed DataPanel

‘dockedItems’ deprecated

Dynamic Docking - dock conﬁguration now accepts a boolean


Layouts in Touch 2
Setting top, left, bottom, or right will now float your component

‘floating’ configuration deprecated

percentage configuration for top, left, bottom, right, height,
and width are now supported

config: {
top: '20%',
left: '10%',
right: '10%',
bottom: '20%'
},


Configuration


Configuration in Touch 2
Proper conﬁgurations are now used throughout Touch 2

Using proper getter and setters maintains the conﬁguration
lifecycle


Getters provide:

Lazy instantiation of the configuration on the first call

Ensures the initial configuration is passed through the setter

Configuration dependency handling


Setters provide:

Execution of an optional apply method

A simple check for a change in value and a call to an optional
update method


Using Apply effectively: Filtering

applyValue: function(value) {
var minValue = this.getMinValue(),
maxValue = this.getMaxValue();

value = parseFloat(Math.min(Math.max(value, minValue),
maxValue));

if (isNaN(value)) {
value = this.getDefaultValue();
}

return value;
},


Using Apply effectively: Validation

applyActiveTab: function(activeTab) {
if (!activeTab && activeTab !== 0) {
return;
}

var activeTabInstance = this.parseActiveTab(activeTab);
if (!activeTabInstance) {
// <debug warn>
Ext.Logger.warn('Trying to set a non-existent activeTab');
// </debug>
return;
}
return activeTabInstance;
},

Using Apply effectively: Transformation

applyLabel: function(config) {
if (typeof config == "string") {
config = {
text: config
};
}

return Ext.factory(config, 'Ext.form.Label', this.getLabel());
},


Using Update effectively: Updating Dependencies

updateContentEl: function(newContentEl, oldContentEl) {
// Take care of the old contentEl
if (oldContentEl) {
oldContentEl.hide();
Ext.getBody().append(oldContentEl);
}
// Take care of the new contentEl
if (newContentEl) {
this.setHtml(newContentEl);
newContentEl.show();
}
},


Wither initComponent

initComponent : function() {
...

if (!this.store) {
this.store = new Ext.data.Store({
model: 'IndexBarModel'
});
}

if (this.alphabet == true) {
this.ui = this.ui || 'alphabet';
}


Wither initComponent


THANK YOU!
Jamie Avins

@jamieavins


Migrating from Touch 1.x to 2.0

Recommended

Recommended

More Related Content

Similar to Migrating from Touch 1.x to 2.0

Similar to Migrating from Touch 1.x to 2.0 (8)

More from Sencha

More from Sencha (20)

Recently uploaded

Recently uploaded (20)

Migrating from Touch 1.x to 2.0