Your SlideShare is downloading. ×
0
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Ext JS 4.1: Layouts, Performance, and API updates
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ext JS 4.1: Layouts, Performance, and API updates

5,592

Published on

Improving layout and rendering performance is a major focus of Ext JS 4.1. This session will discuss some of these details and how they might impact your application, custom components and custom …

Improving layout and rendering performance is a major focus of Ext JS 4.1. This session will discuss some of these details and how they might impact your application, custom components and custom layouts. Beyond these largely invisible features, Ext JS 4.1 has other exciting enhancements. We will also cover: improvements to Grid, Border layout, XTemplate, Data and the class system.

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,592
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
180
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Wednesday, November 2, 2011
  • 2. EXT JS 4.1 What’s New Don GriffinWednesday, November 2, 2011
  • 3. Forum dongryphonWednesday, November 2, 2011
  • 4. Twitter @dongryphonWednesday, November 2, 2011
  • 5. email don@sencha.comWednesday, November 2, 2011
  • 6. Focus AreasWednesday, November 2, 2011
  • 7. Performance Grid API EnhancementsWednesday, November 2, 2011
  • 8. PerformanceWednesday, November 2, 2011
  • 9. Many AspectsWednesday, November 2, 2011
  • 10. load layout DOM Many Aspects DOM initialization rendering DOMWednesday, November 2, 2011
  • 11. DOM load layout DOM security database Many Aspects DOM ajax initialization rendering validation DOMWednesday, November 2, 2011
  • 12. Measurement RequiredWednesday, November 2, 2011
  • 13. Measurement Required Chrome: Profiler, Speed Tracer Firefox: dynaTrace, Firebug IE: dynaTrace, IE8+ Profiler Safari: Developer Tools ProfilerWednesday, November 2, 2011
  • 14. Themes Example - 4.0.7 (IE8)Wednesday, November 2, 2011
  • 15. Themes Example - 4.0.7 (IE8) 4.0.7Wednesday, November 2, 2011
  • 16. Themes Example - 4.0.7 (IE8) Load 300 6% 4.0.7Wednesday, November 2, 2011
  • 17. Themes Example - 4.0.7 (IE8) Load 300 6% 7% Initialize 320 4.0.7Wednesday, November 2, 2011
  • 18. Themes Example - 4.0.7 (IE8) Load 300 6% 7% Initialize 320 36% Rendering 1680 4.0.7Wednesday, November 2, 2011
  • 19. Themes Example - 4.0.7 (IE8) Layout Load 300 2400 51% 6% 7% Initialize 320 4700 36% Rendering 1680 4.0.7Wednesday, November 2, 2011
  • 20. AnalysisWednesday, November 2, 2011
  • 21. Cost is spread across the Page Life CycleWednesday, November 2, 2011
  • 22. Cost is spread across the Page Life CycleWednesday, November 2, 2011
  • 23. Cost is spread across the Page Life Cycle Load Initialize Render LayoutWednesday, November 2, 2011
  • 24. LoadWednesday, November 2, 2011
  • 25. <script src=”ext.js”>Wednesday, November 2, 2011
  • 26. Class SystemWednesday, November 2, 2011
  • 27. DOM ReadyWednesday, November 2, 2011
  • 28. Load InitializeWednesday, November 2, 2011
  • 29. onReadyWednesday, November 2, 2011
  • 30. initComponentWednesday, November 2, 2011
  • 31. prepareItemsWednesday, November 2, 2011
  • 32. Themes - Ext JS 3.4Wednesday, November 2, 2011
  • 33. Themes - Ext JS 3.4 148 components in 50 containersWednesday, November 2, 2011
  • 34. Themes - Ext JS 4.xWednesday, November 2, 2011
  • 35. Themes - Ext JS 4.x 148 271 components in 50 97 containersWednesday, November 2, 2011
  • 36. More flexibilityWednesday, November 2, 2011
  • 37. Components & Containers have a costWednesday, November 2, 2011
  • 38. Observables listeners fireEventsWednesday, November 2, 2011
  • 39. Load Initialize RenderingWednesday, November 2, 2011
  • 40. Wednesday, November 2, 2011
  • 41. Components HTMLWednesday, November 2, 2011
  • 42. panel comp containerWednesday, November 2, 2011
  • 43. el panel render panel comp comp container containerWednesday, November 2, 2011
  • 44. Rendering in 4.0Wednesday, November 2, 2011
  • 45. Wednesday, November 2, 2011
  • 46. panel render comp onRender containerWednesday, November 2, 2011
  • 47. el panel render comp onRender createElement containerWednesday, November 2, 2011
  • 48. el panel render comp onRender createElement renderTpl containerWednesday, November 2, 2011
  • 49. el panel render comp onRender createElement renderTpl container renderSelectorsWednesday, November 2, 2011
  • 50. el panel render comp onRender createElement renderTpl container renderSelectors afterRenderWednesday, November 2, 2011
  • 51. el panel render comp onRender createElement renderTpl container renderSelectors afterRenderWednesday, November 2, 2011
  • 52. Rendering in 4.1Wednesday, November 2, 2011
  • 53. Wednesday, November 2, 2011
  • 54. panel render comp beforeRender renderTpl containerWednesday, November 2, 2011
  • 55. panel render comp beforeRender renderTpl containerWednesday, November 2, 2011
  • 56. el panel render comp beforeRender renderTpl innerHTML containerWednesday, November 2, 2011
  • 57. el panel render comp beforeRender renderTpl innerHTML container onRenderWednesday, November 2, 2011
  • 58. el panel render comp beforeRender renderTpl innerHTML container onRender renderSelectors afterRenderWednesday, November 2, 2011
  • 59. el panel render comp beforeRender renderTpl innerHTML container onRender renderSelectors afterRenderWednesday, November 2, 2011
  • 60. Load Initialize Render LayoutWednesday, November 2, 2011
  • 61. A Place For Everything and Everything In Its PlaceWednesday, November 2, 2011
  • 62. Layout ExampleWednesday, November 2, 2011
  • 63. Ext.widget({ xtype: ‘panel’, layout: ‘fit’, title: ‘Text’, items: [{ xtype: ‘component’, html: ‘foo’, width: 100, height: 100 }] });Wednesday, November 2, 2011
  • 64. Ext.widget({ Ext.widget({ xtype: ‘panel’, xtype: ‘panel’, layout: ‘fit’, layout: ‘fit’, title: ‘Text’, dockedItems: [{ items: [{ xtype: ‘header’, xtype: ‘component’, text: ‘Text’, html: ‘foo’, dock: ‘top’ width: 100, }], height: 100 items: [{ }] xtype: ‘component’, }); html: ‘foo’, width: 100, height: 100 }] });Wednesday, November 2, 2011
  • 65. Text fooWednesday, November 2, 2011
  • 66. Text fooWednesday, November 2, 2011
  • 67. Text fooWednesday, November 2, 2011
  • 68. Text ha foo waWednesday, November 2, 2011
  • 69. Text ha foo waWednesday, November 2, 2011
  • 70. wb = wa Text ha foo waWednesday, November 2, 2011
  • 71. wb = wa Text hb ha foo waWednesday, November 2, 2011
  • 72. wb = wa Text hb ha foo waWednesday, November 2, 2011
  • 73. wb = wa Text hb hc = ha+hb ha foo +fc wa wc = wa + fcWednesday, November 2, 2011
  • 74. First Rule of SpeedWednesday, November 2, 2011
  • 75. Wednesday, November 2, 2011
  • 76. C$$ Calculations Are ExpensiveWednesday, November 2, 2011
  • 77. Wednesday, November 2, 2011
  • 78. ... therefore ...Wednesday, November 2, 2011
  • 79. Wednesday, November 2, 2011
  • 80. Browsers Cache Results *Wednesday, November 2, 2011
  • 81. Browsers Cache Results * * - DOM Writes Invalidate The Cache !Wednesday, November 2, 2011
  • 82. Write + Read = ReflowWednesday, November 2, 2011
  • 83. Second Rule of SpeedWednesday, November 2, 2011
  • 84. Apps Have More Than One Panel!Wednesday, November 2, 2011
  • 85. el panel comp containerWednesday, November 2, 2011
  • 86. component (3.x) el panel comp containerWednesday, November 2, 2011
  • 87. container (4.0) component (3.x) el panel comp containerWednesday, November 2, 2011
  • 88. container (4.0) global (4.1) component (3.x) el layout panel context comp containerWednesday, November 2, 2011
  • 89. Minimizing Reflows var maxHt = 0, n = elements.length, i; for (i=0; i < n; ++i) { elements[i].setWidth(w); maxHt = Math.max(maxHt, elements[i].getHeight()); } for (i=0; i < n; ++i) { elements[i].setHeight(maxHt); }Wednesday, November 2, 2011
  • 90. Minimizing Reflows var maxHt = 0, n = elements.length, i; for (i=0; i < n; ++i) { elements[i].setWidth(w); maxHt = Math.max(maxHt, elements[i].getHeight()); } for (i=0; i < n; ++i) { elements[i].setHeight(maxHt); } n+1 reflowsWednesday, November 2, 2011
  • 91. Minimizing Reflows var maxHt = 0, var maxHt = 0, n = elements.length, n = elements.length, i; i; for (i=0; i < n; ++i) { for (i=0; i < n; ++i) { elements[i].setWidth(w); elements[i].setWidth(w); maxHt = Math.max(maxHt, } elements[i].getHeight()); } for (i=0; i < n; ++i) { maxHt = Math.max(maxHt, for (i=0; i < n; ++i) { elements[i].getHeight()); elements[i].setHeight(maxHt); } } for (i=0; i < n; ++i) { elements[i].setHeight(maxHt); } n+1 reflowsWednesday, November 2, 2011
  • 92. Minimizing Reflows var maxHt = 0, var maxHt = 0, n = elements.length, n = elements.length, i; i; for (i=0; i < n; ++i) { for (i=0; i < n; ++i) { elements[i].setWidth(w); elements[i].setWidth(w); maxHt = Math.max(maxHt, } elements[i].getHeight()); } for (i=0; i < n; ++i) { maxHt = Math.max(maxHt, for (i=0; i < n; ++i) { elements[i].getHeight()); elements[i].setHeight(maxHt); } } for (i=0; i < n; ++i) { elements[i].setHeight(maxHt); } n+1 reflows 2 reflowsWednesday, November 2, 2011
  • 93. More OpportunitiesWednesday, November 2, 2011
  • 94. Leverage Layout Dependency DataWednesday, November 2, 2011
  • 95. Cache Layout ResultsWednesday, November 2, 2011
  • 96. Themes Example - 4.1 (IE8)Wednesday, November 2, 2011
  • 97. Themes Example - 4.1 (IE8) 4.0.7 4.1Wednesday, November 2, 2011
  • 98. Themes Example - 4.1 (IE8) 300 Load 200 8% 4.0.7 4.1Wednesday, November 2, 2011
  • 99. Themes Example - 4.1 (IE8) 300 Load 200 8% 10% Initialization 320 240 4.0.7 4.1Wednesday, November 2, 2011
  • 100. Themes Example - 4.1 (IE8) 300 Load 200 8% 10% Initialization 320 43% 240 Rendering 4.0.7 1680 4.1 1035Wednesday, November 2, 2011
  • 101. Themes Example - 4.1 (IE8) Layout 300 2400 39% Load 200 945 8% 10% 4700 Initialization 320 43% 240 2420 Rendering 4.0.7 1680 4.1 1035Wednesday, November 2, 2011
  • 102. Significantly faster than 4.0 !Wednesday, November 2, 2011
  • 103. But not faster than 3.4...Wednesday, November 2, 2011
  • 104. But not faster than 3.4... YetWednesday, November 2, 2011
  • 105. Further InvestigationWednesday, November 2, 2011
  • 106. Further Investigation Convert Layouts into CSS... where possible Optimize Class Creation Optimize DOM Event BindingWednesday, November 2, 2011
  • 107. GridWednesday, November 2, 2011
  • 108. Native Scrolling!Wednesday, November 2, 2011
  • 109. momentum friction Native Scrolling! accelerationWednesday, November 2, 2011
  • 110. What Could Be Better?!?Wednesday, November 2, 2011
  • 111. Native Scrolling with Buffering!Wednesday, November 2, 2011
  • 112. Is There More?Wednesday, November 2, 2011
  • 113. Native Infinite Scrolling!Wednesday, November 2, 2011
  • 114. But Wait...Wednesday, November 2, 2011
  • 115. Optimized Column ReorderingWednesday, November 2, 2011
  • 116. Store metadataWednesday, November 2, 2011
  • 117. API EnhancementsWednesday, November 2, 2011
  • 118. Border LayoutWednesday, November 2, 2011
  • 119. Multiple regionsWednesday, November 2, 2011
  • 120. North W Multiple regions E e a s s t t SouthWednesday, November 2, 2011
  • 121. North W W Multiple regions E E e s e s of a s a s t t t t the same type SouthWednesday, November 2, 2011
  • 122. Control Space PriorityWednesday, November 2, 2011
  • 123. W Control E e a s s t t Space PriorityWednesday, November 2, 2011
  • 124. North W Control E E e W a a s e s s t s t t t Space Priority SouthWednesday, November 2, 2011
  • 125. Regions can be added and removed dynamicallyWednesday, November 2, 2011
  • 126. XTemplateWednesday, November 2, 2011
  • 127. Foundational to Ext JSWednesday, November 2, 2011
  • 128. XTemplateWednesday, November 2, 2011
  • 129. XTemplate compiles faster... runs faster... is debuggable...Wednesday, November 2, 2011
  • 130. XTemplate compiles faster... runs faster... is debuggable... and more powerful!Wednesday, November 2, 2011
  • 131. Compiles To A FunctionWednesday, November 2, 2011
  • 132. <tpl> <ul> <tpl for=”x”> <li>{fname} <tpl if=”lname”> {lname} <tpl else> (None) </tpl> </li> </tpl> </ul> </tpl>Wednesday, November 2, 2011
  • 133. <tpl> function tplFn (out, values..) { <ul> out.push(’<ul>’); <tpl for=”x”> for (var n in values.x) { <li>{fname} var v2 = values.x[n]; <tpl if=”lname”> out.push(’<li>’); {lname} out.push(v2.fname); <tpl else> if (v2.lname) { (None) out.push(v2.lname); </tpl> } else { </li> out.push(‘(None)’); </tpl> } </ul> } </tpl> out.push(‘</li>’); } out.push(‘</ul>’); }Wednesday, November 2, 2011
  • 134. Control StructuresWednesday, November 2, 2011
  • 135. <tpl if="age == 3"> {x} <tpl elseif=”age == 2”> {y} <tpl else> {z} </tpl>Wednesday, November 2, 2011
  • 136. <tpl switch="age"> <tpl case="3" case="4"> <p>{name} is 3 or 4</p> <tpl case="2"> <p>{name} is two</p> <tpl default> <p>{name} is {age}!</p> </tpl>Wednesday, November 2, 2011
  • 137. Code InjectionWednesday, November 2, 2011
  • 138. <tpl> {% var i=0; %} <tpl for=”x”> {name} {% if (++i==9) break; %} </tpl> </tpl>Wednesday, November 2, 2011
  • 139. <tpl> function tplFn (out, values..) { {% var i=0; %} var i=0; <tpl for=”x”> for (var n in values.x) { {name} out.push(v2.name); {% if (++i==9) break; %} if (++i == 9) break; </tpl> } </tpl> }Wednesday, November 2, 2011
  • 140. applyOutWednesday, November 2, 2011
  • 141. var tpl = new Ext.XTemplate(...); // This: var s = tpl.apply(data); // is equivalent to: var a = []; tpl.applyOut(a, data); s = a.join(‘’);Wednesday, November 2, 2011
  • 142. Class SystemWednesday, November 2, 2011
  • 143. Overrides Ext.define(‘My.patches.GridOverride’, { override: ‘Ext.grid.Panel’, initComponent: function () { this.callParent(); } }); ------------------- Ext.define(‘My.app.App’, { requires: [ ‘My.patches.*’ ], ... });Wednesday, November 2, 2011
  • 144. Overrides Ext.define(‘My.patches.GridOverride’, { Named and used override: ‘Ext.grid.Panel’, like a normal class initComponent: function () { this.callParent(); } }); ------------------- Ext.define(‘My.app.App’, { requires: [ ‘My.patches.*’ ], ... });Wednesday, November 2, 2011
  • 145. Overrides Ext.define(‘My.patches.GridOverride’, { Named and used override: ‘Ext.grid.Panel’, like a normal class initComponent: function () { this.callParent(); } }); Only added to the ------------------- build if the target Ext.define(‘My.app.App’, { class is required requires: [ ‘My.patches.*’ ], ... });Wednesday, November 2, 2011
  • 146. Ext.create/widget 4.0 Ext.create(‘Ext.grid.Panel’, { ... config ... }); // or Ext.widget(‘grid’, { ... config ... });Wednesday, November 2, 2011
  • 147. Ext.create/widget 4.0 4.1 Ext.create(‘Ext.grid.Panel’, { Ext.create({ xclass: ‘Ext.grid.Panel’, ... config ... ... config ... }); }); // or // or Ext.widget(‘grid’, { Ext.widget({ xtype: ‘grid’., ... config ... ... config ... }); });Wednesday, November 2, 2011
  • 148. Methods in configs - 4.0 items: [ { xtype: ‘foo’, method: function (a) { return Ext.foo.Bar.prototype.method.call(this, a*2); a*2; } }]Wednesday, November 2, 2011
  • 149. Methods in configs - 4.0 items: [ { xtype: ‘foo’, method: function (a) { return Ext.foo.Bar.prototype.method.call(this, a*2); a*2; } }] Messy if you need to call original method!Wednesday, November 2, 2011
  • 150. xhooks items: [ { xtype: ‘foo’, xhooks: { method: function (a) { return this.callParent([a * 2]); } } }]Wednesday, November 2, 2011
  • 151. Q&A Don Griffin don@sencha.com @dongryphon dongryphon (forum)Wednesday, November 2, 2011

×