Download - Migrating from Touch 1.x to 2.0
![Page 1: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/1.jpg)
Wednesday, November 2, 2011
![Page 2: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/2.jpg)
Jamie Avins
@jamieavins
MIGRATING TO TOUCH 2
Wednesday, November 2, 2011
![Page 3: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/3.jpg)
Rendering
Wednesday, November 2, 2011
![Page 4: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/4.jpg)
Touch 2 splits this process into two distinct pieces
Rendering in Touch 2Touch 1 combined Element creation and DOM placement
Placement
Creation
Wednesday, November 2, 2011
![Page 5: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/5.jpg)
Touch 2 splits this process into two distinct pieces
Rendering in Touch 2Touch 1 combined Element creation and DOM placement
Placement
Creation
Wednesday, November 2, 2011
![Page 6: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/6.jpg)
Touch 2 splits this process into two distinct pieces
Rendering in Touch 2Touch 1 combined Element creation and DOM placement
Placement
Creation
Wednesday, November 2, 2011
![Page 7: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/7.jpg)
Rendering in Touch 2The 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
Wednesday, November 2, 2011
![Page 8: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/8.jpg)
Rendering in Touch 2Touch 1 stored a DOM markup on the prototype
Touch 2 stores a DOM element on the prototype
element.cloneNode(true) for all instances
Wednesday, November 2, 2011
![Page 9: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/9.jpg)
Rendering in Touch 2Adding a Component to a Container will move its elements inside the DOM - fires the ‘painted’ event
Removing a Component from a Container will move its elements outside the DOM - fires the ‘erased’ event
Component.show() will place the Component in the ViewPort
Wednesday, November 2, 2011
![Page 10: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/10.jpg)
Rendering in Touch 2Being able to ‘erase’ components from the DOM and using clean configurations 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(); }}
Wednesday, November 2, 2011
![Page 11: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/11.jpg)
Rendering in Touch 2Being able to ‘erase’ components from the DOM and using clean configurations 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)); }}
Wednesday, November 2, 2011
![Page 12: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/12.jpg)
Rendering in Touch 2Unsupported Methods:
renderafterRender
The ‘render’ event is slated for deprecation
Wednesday, November 2, 2011
![Page 13: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/13.jpg)
CSS Layouts
Wednesday, November 2, 2011
![Page 14: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/14.jpg)
Layouts in Touch 2Layouts are now completely CSS Based
Wednesday, November 2, 2011
![Page 15: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/15.jpg)
Layouts in Touch 2Layouts are now completely CSS Based
.x-layout-fit { position: relative; display: -webkit-box;
> * { -webkit-box-flex: 1; min-width: 100%; min-height: 100%; }}
.x-layout-card { position: relative; overflow: hidden;
> .x-layout-card-item { position: absolute !important; width: 100%; height: 100%; }}
.x-layout-hbox, .x-layout-vbox { display: -webkit-box; > * { -webkit-box-flex: 0; } }
.x-layout-hbox { -webkit-box-orient: horizontal;
> .x-layout-box-item { width: 0 !important; } }
.x-layout-vbox { -webkit-box-orient: vertical;
> .x-layout-box-item { height: 0 !important; } }
.x-docking-horizontal { display: -webkit-box; -webkit-box-flex: 1; -webkit-box-orient: horizontal; min-width: 100%; min-height: 100%;}
.x-docking-vertical { display: -webkit-box; -webkit-box-flex: 1; -webkit-box-orient: vertical; min-width: 100%; min-height: 100%;}
Wednesday, November 2, 2011
![Page 16: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/16.jpg)
Layouts in Touch 2Place elements in the appropriate DOM location
Apply CSS Layout classes
Apply layout configurations such as pack, flex, align, etc.
Wrap components for docking and centering
Wednesday, November 2, 2011
![Page 17: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/17.jpg)
Layouts in Touch 2Unsupported Methods:
doLayoutdoComponentLayoutafterLayout
Wednesday, November 2, 2011
![Page 18: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/18.jpg)
Layouts in Touch 2Without afterLayout, how can you detect size changes?
ScrollerNavigationBarSliderDrawComponent
Wednesday, November 2, 2011
![Page 19: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/19.jpg)
Layouts in Touch 2Without afterLayout, how can you detect size changes?
new Ext.util.SizeMonitor({ element: this.element, callback: this.onSizeChange, scope: this});
ScrollerNavigationBarSliderDrawComponent
Wednesday, November 2, 2011
![Page 20: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/20.jpg)
Layouts in Touch 2How does SizeMonitor work?
Add two absolutely positioned elements with scroll listeners
If position and scroll don’t match, we run our callback
Target Element
Detect Shrinking
Detect Expanding
Wednesday, November 2, 2011
![Page 21: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/21.jpg)
Layouts in Touch 2Docking moved to Container
Wednesday, November 2, 2011
![Page 22: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/22.jpg)
Layouts in Touch 2
Remove Panel overnesting
Removed DataPanel
‘dockedItems’ deprecated
Dynamic Docking - dock configuration now accepts a boolean
Docking moved to Container
Wednesday, November 2, 2011
![Page 23: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/23.jpg)
Layouts in Touch 2Setting 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%'},
Wednesday, November 2, 2011
![Page 24: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/24.jpg)
Configuration
Wednesday, November 2, 2011
![Page 25: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/25.jpg)
Configuration in Touch 2Proper configurations are now used throughout Touch 2
Using proper getter and setters maintains the configuration lifecycle
Wednesday, November 2, 2011
![Page 26: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/26.jpg)
Configuration in Touch 2Getters provide:
Lazy instantiation of the configuration on the first call
Ensures the initial configuration is passed through the setter
Configuration dependency handling
Wednesday, November 2, 2011
![Page 27: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/27.jpg)
Configuration in Touch 2Setters provide:
Execution of an optional apply method
A simple check for a change in value and a call to an optional update method
Wednesday, November 2, 2011
![Page 28: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/28.jpg)
Configuration in Touch 2Using 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;},
Wednesday, November 2, 2011
![Page 29: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/29.jpg)
Configuration in Touch 2Using 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;},
Wednesday, November 2, 2011
![Page 30: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/30.jpg)
Configuration in Touch 2Using Apply effectively: Transformation
applyLabel: function(config) { if (typeof config == "string") { config = { text: config }; }
return Ext.factory(config, 'Ext.form.Label', this.getLabel());},
Wednesday, November 2, 2011
![Page 31: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/31.jpg)
Configuration in Touch 2Using 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(); }},
Wednesday, November 2, 2011
![Page 32: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/32.jpg)
Configuration in Touch 2Wither initComponent
initComponent : function() { ...
if (!this.store) { this.store = new Ext.data.Store({ model: 'IndexBarModel' }); }
if (this.alphabet == true) { this.ui = this.ui || 'alphabet'; }
Wednesday, November 2, 2011
![Page 33: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/33.jpg)
Configuration in Touch 2Wither initComponent
Wednesday, November 2, 2011
![Page 34: Migrating from Touch 1.x to 2.0](https://reader033.vdocuments.us/reader033/viewer/2022051609/545c5172af7959b4098b4716/html5/thumbnails/34.jpg)
Jamie Avins
@jamieavins
THANK YOU!
Wednesday, November 2, 2011