More Related Content
Similar to What's Coming Next in Sencha Frameworks (20)
What's Coming Next in Sencha Frameworks
- 44. el.on({
click:
this.onClick
});
el.on({
tap:
this.onClick
});
Translated
- 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>
- 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);
- 54. Grid Updates Today
<tr>
<td
class="...">
<div
class="x-‐grid-‐cell-‐inner">
<span
style="color:red">...</span>
</div>
</td>
</tr>
?
- 56. Grid Updates Today
<tr>
<td
class="...">
<div
class="x-‐grid-‐cell-‐inner">
<span
style="color:red">...</span>
</div>
</td>
</tr>
- 59. Grid Updates Today
The full signature for renderer is:
function
(value,
cellData,
record,
//
problem
#2
rowIndex,
columnIndex,
store,
view);
- 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');
}
}]
- 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")}'
}
}]
- 89.
config
:
{
routes
:
{
'foo/bar/:id':
'handleFooBar'
}
},
handleFooBar:
function
(id)
{
...
}
- 91.
config
:
{
routes
:
{
'foo/bar/:id':
{
action:
'handleFoo',
before:
'beforeFoo'
}
}
},
beforeFoo:
function
(id,
action)
{
...
validate
action
...
}