View
2.845
Download
0
Category
Tags:
Preview:
DESCRIPTION
Understand how to benefit from the latest capabilities of the Sencha Touch framework, and how to ensure your code is compatible when you upgrade.
Citation preview
Wednesday, November 2, 2011
Jamie Avins
@jamieavins
MIGRATING TO TOUCH 2
Wednesday, November 2, 2011
Rendering
Wednesday, November 2, 2011
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
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
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
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
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
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
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
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
Rendering in Touch 2Unsupported Methods:
renderafterRender
The ‘render’ event is slated for deprecation
Wednesday, November 2, 2011
CSS Layouts
Wednesday, November 2, 2011
Layouts in Touch 2Layouts are now completely CSS Based
Wednesday, November 2, 2011
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
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
Layouts in Touch 2Unsupported Methods:
doLayoutdoComponentLayoutafterLayout
Wednesday, November 2, 2011
Layouts in Touch 2Without afterLayout, how can you detect size changes?
ScrollerNavigationBarSliderDrawComponent
Wednesday, November 2, 2011
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
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
Layouts in Touch 2Docking moved to Container
Wednesday, November 2, 2011
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
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
Configuration
Wednesday, November 2, 2011
Configuration in Touch 2Proper configurations are now used throughout Touch 2
Using proper getter and setters maintains the configuration lifecycle
Wednesday, November 2, 2011
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
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
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
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
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
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
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
Configuration in Touch 2Wither initComponent
Wednesday, November 2, 2011
Jamie Avins
@jamieavins
THANK YOU!
Wednesday, November 2, 2011
Recommended