Wednesday, November 2, 2011
EXT JS 4.1                               What’s New                                Don GriffinWednesday, November 2, 2011
Forum                              dongryphonWednesday, November 2, 2011
Twitter                              @dongryphonWednesday, November 2, 2011
email                              don@sencha.comWednesday, November 2, 2011
Focus AreasWednesday, November 2, 2011
Performance                                    Grid                              API EnhancementsWednesday, November 2, 2011
PerformanceWednesday, November 2, 2011
Many AspectsWednesday, November 2, 2011
load                                           layout                    DOM                                 Many Aspects ...
DOM                               load                                                     layout                    DOM  ...
Measurement RequiredWednesday, November 2, 2011
Measurement Required                              Chrome: Profiler, Speed Tracer                              Firefox: dyna...
Themes Example - 4.0.7 (IE8)Wednesday, November 2, 2011
Themes Example - 4.0.7 (IE8)         4.0.7Wednesday, November 2, 2011
Themes Example - 4.0.7 (IE8)                                   Load   300                              6%         4.0.7Wed...
Themes Example - 4.0.7 (IE8)                                   Load   300                              6%                 ...
Themes Example - 4.0.7 (IE8)                                            Load    300                                    6% ...
Themes Example - 4.0.7 (IE8)                              Layout                       Load    300                        ...
AnalysisWednesday, November 2, 2011
Cost is spread across                               the Page Life CycleWednesday, November 2, 2011
Cost is spread across                               the Page Life CycleWednesday, November 2, 2011
Cost is spread across                               the Page Life Cycle              Load               Initialize   Rende...
LoadWednesday, November 2, 2011
<script src=”ext.js”>Wednesday, November 2, 2011
Class SystemWednesday, November 2, 2011
DOM ReadyWednesday, November 2, 2011
Load                              InitializeWednesday, November 2, 2011
onReadyWednesday, November 2, 2011
initComponentWednesday, November 2, 2011
prepareItemsWednesday, November 2, 2011
Themes - Ext JS 3.4Wednesday, November 2, 2011
Themes - Ext JS 3.4                                   148 components                                         in           ...
Themes - Ext JS 4.xWednesday, November 2, 2011
Themes - Ext JS 4.x                                  148 271 components                                           in      ...
More flexibilityWednesday, November 2, 2011
Components                              & Containers                              have a costWednesday, November 2, 2011
Observables                                listeners                               fireEventsWednesday, November 2, 2011
Load                          Initialize                                           RenderingWednesday, November 2, 2011
Wednesday, November 2, 2011
Components   HTMLWednesday, November 2, 2011
panel                              comp                          containerWednesday, November 2, 2011
el             panel                    render   panel                              comp                      comp        ...
Rendering in 4.0Wednesday, November 2, 2011
Wednesday, November 2, 2011
panel                                      render                              comp   onRender                        cont...
el           panel                                             render                              comp          onRender ...
el           panel                                             render                              comp          onRender ...
el           panel                                              render                              comp          onRender...
el           panel                                              render                              comp          onRender...
el           panel                                              render                              comp          onRender...
Rendering in 4.1Wednesday, November 2, 2011
Wednesday, November 2, 2011
panel                                        render                              comp   beforeRender                      ...
panel                                        render                              comp   beforeRender                      ...
el           panel                                             render                              comp        beforeRende...
el           panel                                             render                              comp        beforeRende...
el           panel                                              render                              comp        beforeRend...
el           panel                                              render                              comp        beforeRend...
Load                        Initialize   Render                                           LayoutWednesday, November 2, 2011
A Place For Everything                                       and                              Everything In Its PlaceWedne...
Layout ExampleWednesday, November 2, 2011
Ext.widget({           xtype: ‘panel’,           layout: ‘fit’,           title: ‘Text’,           items: [{              ...
Ext.widget({                 Ext.widget({           xtype: ‘panel’,              xtype: ‘panel’,           layout: ‘fit’, ...
Text                                     fooWednesday, November 2, 2011
Text                                     fooWednesday, November 2, 2011
Text                                     fooWednesday, November 2, 2011
Text                                           ha                                     foo                                 ...
Text                                           ha                                     foo                                 ...
wb = wa                              Text                                               ha                                ...
wb = wa                              Text             hb                                               ha                 ...
wb = wa                              Text             hb                                               ha                 ...
wb = wa                              Text                  hb                hc           = ha+hb                         ...
First Rule of SpeedWednesday, November 2, 2011
Wednesday, November 2, 2011
C$$                              Calculations                                  Are                               Expensive...
Wednesday, November 2, 2011
... therefore ...Wednesday, November 2, 2011
Wednesday, November 2, 2011
Browsers Cache Results   *Wednesday, November 2, 2011
Browsers Cache Results                            *                       * - DOM Writes Invalidate The Cache   !Wednesday...
Write + Read = ReflowWednesday, November 2, 2011
Second Rule of SpeedWednesday, November 2, 2011
Apps Have More                                   Than                                One Panel!Wednesday, November 2, 2011
el                              panel                                       comp                                      cont...
component (3.x)                                                  el                              panel                    ...
container (4.0)                                    component (3.x)                                                  el    ...
container (4.0)                              global (4.1)   component (3.x)                                               ...
Minimizing Reflows    var maxHt = 0,        n = elements.length,        i;    for (i=0; i < n; ++i) {       elements[i].set...
Minimizing Reflows    var maxHt = 0,        n = elements.length,        i;    for (i=0; i < n; ++i) {       elements[i].set...
Minimizing Reflows    var maxHt = 0,                     var maxHt = 0,        n = elements.length,               n = eleme...
Minimizing Reflows    var maxHt = 0,                     var maxHt = 0,        n = elements.length,               n = eleme...
More OpportunitiesWednesday, November 2, 2011
Leverage Layout Dependency DataWednesday, November 2, 2011
Cache Layout ResultsWednesday, November 2, 2011
Themes Example - 4.1 (IE8)Wednesday, November 2, 2011
Themes Example - 4.1 (IE8)         4.0.7         4.1Wednesday, November 2, 2011
Themes Example - 4.1 (IE8)                                            300                                     Load   200  ...
Themes Example - 4.1 (IE8)                                              300                                      Load    2...
Themes Example - 4.1 (IE8)                                                       300                                      ...
Themes Example - 4.1 (IE8)                              Layout                                  300                       ...
Significantly faster than 4.0 !Wednesday, November 2, 2011
But not faster than 3.4...Wednesday, November 2, 2011
But not faster than 3.4...                                         YetWednesday, November 2, 2011
Further InvestigationWednesday, November 2, 2011
Further Investigation                        Convert Layouts into CSS... where possible                                  O...
GridWednesday, November 2, 2011
Native                              Scrolling!Wednesday, November 2, 2011
momentum                                                   friction                                       Native          ...
What Could                              Be Better?!?Wednesday, November 2, 2011
Native                              Scrolling                                with                              Buffering!W...
Is There More?Wednesday, November 2, 2011
Native                               Infinite                              Scrolling!Wednesday, November 2, 2011
But Wait...Wednesday, November 2, 2011
Optimized                               Column                              ReorderingWednesday, November 2, 2011
Store metadataWednesday, November 2, 2011
API EnhancementsWednesday, November 2, 2011
Border LayoutWednesday, November 2, 2011
Multiple regionsWednesday, November 2, 2011
North        W                              Multiple regions   E        e                                        a        ...
North        W              W                              Multiple regions   E   E        e        s                     ...
Control                              Space PriorityWednesday, November 2, 2011
W                                 Control       E        e                                      a        s                ...
North        W                                 Control       E   E        e              W                       a   a    ...
Regions can be                              added and removed                                 dynamicallyWednesday, Novemb...
XTemplateWednesday, November 2, 2011
Foundational to                                  Ext JSWednesday, November 2, 2011
XTemplateWednesday, November 2, 2011
XTemplate                              compiles faster...                                runs faster...                   ...
XTemplate                               compiles faster...                                 runs faster...                 ...
Compiles To A FunctionWednesday, November 2, 2011
<tpl>        <ul>            <tpl for=”x”>               <li>{fname}                   <tpl if=”lname”>                   ...
<tpl>                            function tplFn (out, values..) {        <ul>                              out.push(’<ul>’...
Control StructuresWednesday, November 2, 2011
<tpl if="age == 3">                                 {x}                              <tpl elseif=”age == 2”>              ...
<tpl switch="age">                                 <tpl case="3" case="4">                                     <p>{name} i...
Code InjectionWednesday, November 2, 2011
<tpl>        {% var i=0; %}        <tpl for=”x”>            {name}            {% if (++i==9) break; %}        </tpl>     <...
<tpl>                           function tplFn (out, values..) {        {% var i=0; %}                  var i=0;        <t...
applyOutWednesday, November 2, 2011
var tpl = new Ext.XTemplate(...);                              // This:                              var s = tpl.apply(dat...
Class SystemWednesday, November 2, 2011
Overrides     Ext.define(‘My.patches.GridOverride’, {              override: ‘Ext.grid.Panel’,              initComponent:...
Overrides     Ext.define(‘My.patches.GridOverride’, {                                               Named and used        ...
Overrides     Ext.define(‘My.patches.GridOverride’, {                                               Named and used        ...
Ext.create/widget     4.0     Ext.create(‘Ext.grid.Panel’, {              ... config ...     });     // or     Ext.widget(...
Ext.create/widget     4.0                                4.1     Ext.create(‘Ext.grid.Panel’, {     Ext.create({          ...
Methods in configs - 4.0            items: [ {               xtype: ‘foo’,                   method: function (a) {        ...
Methods in configs - 4.0            items: [ {               xtype: ‘foo’,                   method: function (a) {        ...
xhooks            items: [ {               xtype: ‘foo’,                   xhooks: {                      method: function...
Q&A                              Don Griffin                              don@sencha.com                              @dong...
Upcoming SlideShare
Loading in …5
×

Ext JS 4.1: Layouts, Performance, and API updates

6,396 views
6,230 views

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 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
6,396
On SlideShare
0
From Embeds
0
Number of Embeds
910
Actions
Shares
0
Downloads
185
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Ext JS 4.1: Layouts, Performance, and API updates

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

×