Don Griffin at ModUX 2013 http://moduxcon.com

1. What’s Coming
Next in
Sencha Frameworks

2. Don Griffin
Engineering Manager
don@sencha.com
@dongryphon

3. Framework
Goals

4. Awesome Apps
Scalable Development
Device Compatibility
Goals

5. Common
Core

6. sencha-core

7. sencha-core
Goals

8. Consistency
Compatibility
sencha-core : Goals

9. sencha-core
Content

10. sencha-core : Content
Feature / Environment
Detection
Ext.env,
Ext.feature,
Ext.browser,
Ext.os,
Ext.supports,
Ext.is

11. Utilities
XTemplate,
Ext.Array,
Ext.Object,
Ext.String,
Ext.Function,
Ext.Date,
...
sencha-core : Content

12. Class System
sencha-core : Content

13. Dynamic Loader
sencha-core : Content

14. Momentum Scroller
sencha-core : Content

15. Delegated Event System
sencha-core : Content

16. Gesture Recognition
sencha-core : Content

17. Ext.data
Investigating
sencha-core : Content

18. Charts

19. Charts - Today
Ext JS
Ext.chart
Sencha
Touch
Ext.chart

20. Charts - Today
Ext JS

21. Charts - Ext JS Today
Designed for Desktop

22. Charts - Ext JS Today
Mouse Input

23. Charts - Ext JS Today
Plenty of Memory & CPU

24. Charts - Today
Sencha Touch

25. Charts - Touch Today
Designed for Touch Input

26. Charts - Touch Today
Constrained Memory

27. Charts - Touch Today
Limited CPU

28. Charts - Touch Today
Large Datasets

29. Charts - Going Forward
Unification
Leverage Gains
Easy Migration

30. Charts
Ext JS
ext-chartsExt.chart
Sencha
Touch
Ext.chartsencha-charts
Today
Packages

31. Sencha Touch

32. New
Themes

33. Blackberry 10

35. Cordova /
PhoneGap

36. Ext.device.*

37. sencha
cordova
init

38. sencha
phonegap
init

39. Touch
Grid

40. Demo

41. Ext JS

42. Touch
Events

43. tap
swipe
pinch
touchmove
touchstart/end
longpress
rotate
doubletap
tapcancel
singletap
pinchstart/end
rotatestart/end
drag

44. el.on({
click:
this.onClick
});
el.on({
tap:
this.onClick
});
Translated

45. Grid

46. Cell
Updating

47. Custom Renderers
columns:
[{
text:
'%
Change',
dataIndex:
'field',
renderer:
function
(v)
{
var
c
=
(v
<
0)
?
'red'
:
'green';
return
'<span
style="color:'+c+';">'
+
Ext.util.Format.number(v,
'0.00')
+
'</span>';
}
}]

48. Anatomy of a Grid Cell
<tr>
<td
class="...">
<div
class="x-­‐grid-­‐cell-­‐inner">
<span
style="color:red">...</span>
</div>
</td>
</tr>

49. Grid Updates Today
record.set('field',
42);

50. Grid Updates Today
Render
The Cell
...Again

51. Grid Updates Today
<tr>
<td
class="...">
<div
class="x-­‐grid-­‐cell-­‐inner">
<span
style="color:red">...</span>
</div>
</td>
</tr>
?

52. Grid Updates Today
The full signature for renderer is:
function
(value,
cellData,
//
problem
#1
record,
rowIndex,
columnIndex,
store,
view);

53. Grid Updates Today
cellData.innerCls
vs.
<div>

54. Grid Updates Today
<tr>
<td
class="...">
<div
class="x-­‐grid-­‐cell-­‐inner">
<span
style="color:red">...</span>
</div>
</td>
</tr>
?

55. Grid Updates Today
cellData.tdCls
vs.
<td>

56. Grid Updates Today
<tr>
<td
class="...">
<div
class="x-­‐grid-­‐cell-­‐inner">
<span
style="color:red">...</span>
</div>
</td>
</tr>

57. Grid Updates Today
Not so bad
?

58. Grid Updates Today
record.set('other',
2);

59. Grid Updates Today
The full signature for renderer is:
function
(value,
cellData,
record,
//
problem
#2
rowIndex,
columnIndex,
store,
view);

60. Grid Updates Today
When
Any
Field Changes?!

61. Grid Cell Updaters
update
!==
render

62. Grid Cell Updaters
columns:
[{
text:
'%
Change',
dataIndex:
'fieldName',
depends:
['field2',
'field3'],
renderer:
...,
updater:
function
(el,
v,
record)
{
var
sp
=
Ext.fly(el).down('span',
true);
sp.style.color
=
(v
<
0)
?
'red'
:
'green';
sp.firstChild.data
=
Ext.util.Format.number(v,
'0.00');
}
}]

63. Grid Cell Updaters
Minimal DOM
Change

64. Grid Cell Updaters
Only When
Needed

65. Buffered
Updates

66. Buffered Updates
Configure
Maximum
Rate

67. Buffered Updates
Tracks
Field
Changes

68. Gadgets

69. Gadgets
Think
Flyweight
Components

70. Gadgets
Minimal Life-cycle

71. Gadgets
Data Bound

72. Gadgets
Gadget
el0
childEl childEl
el
el1
childEl childEl
+data
+data

73. Gadgets
Declarative
Listeners

74. Gadgets
Ext.define('Ext.gadget.Slider',
extend:
'Ext.gadget.Gadget',
...
listeners:
{
mousedown:
'onMouseDown',
dragstart:
'cancelDrag',
drag:
'cancelDrag',
dragend:
'cancelDrag'
},

75. Gadgets
Listeners
in
childEls

76. Gadgets
Events
are
Delegated

77. Gadgets
gadget.attach(data,
el);

78. Gadgets - Grid Column
columns:
[{
xtype:
'gadgetcolumn',
dataIndex:
'status',
gadget:
'progressbar'
}]
Configured on columns similar to ‘editor’

79. Gadgets - Grid Column
columns:
[{
xtype:
'gadgetcolumn',
gadget:
{
type:
'button',
text:
'Remove'
}
}]

80. Gadgets - Grid Column
columns:
[{
xtype:
'gadgetcolumn',
dataIndex:
'size',
gadget:
'slider'
}]
In some case it can even edit like an ‘editor’

81. Gadgets - Grid Column
columns:
[{
text:
'Trend',
gadget:
{
type:
'sparkline.line',
width:
'100%',
tipTpl:
'Price:
{y:number("0.00")}'
}
}]

82. Demo

83. MVC
Routing

84. Address Bar
Controller Methods

85. http://www.foo.com/app#foo/bar
controller.handleFooBar()

86. Ext.define('MyApp.controller.Foo',
{
extend:
'Ext.app.Controller',
config
:
{
routes
:
{
'foo/bar':
'handleFoo'
}
},
handleFoo:
function
()
{
...
}
});

87. What about Parameters?

88. http://www.foo.com/app#foo/bar/42
controller.handleFooBar(42)

89.
config
:
{
routes
:
{
'foo/bar/:id':
'handleFooBar'
}
},
handleFooBar:
function
(id)
{
...
}

90. Validating Actions

91.
config
:
{
routes
:
{
'foo/bar/:id':
{
action:
'handleFoo',
before:
'beforeFoo'
}
}
},
beforeFoo:
function
(id,
action)
{
...
validate
action
...
}

92. Forms

93. Ext.picker.Color

94. Ext.button.Segmented

95. Ext.form.field.Tag

96. Demo

97. Border
Layout

98. Region Groups
Shared space for Regions

99. Group Arrangement
Tabs
Boxes
Accordion

100. Stateful
Item Persistence

101. Demo

102. Conclusion
• Contact Info
- don@sencha.com
- @dongryphon