What's Coming Next in Sencha Frameworks

What’s ComingNext in

Sencha Frameworks

Don GriffinEngineering Manager

[email protected]@dongryphon

FrameworkGoals

Awesome Apps

Scalable Development

Device Compatibility

Goals

CommonCore

sencha-core

sencha-core

Goals

Consistency

Compatibility

sencha-core : Goals

sencha-core

Content

sencha-core : Content

Feature / EnvironmentDetection

Ext.env, Ext.feature,Ext.browser, Ext.os,Ext.supports, Ext.is

Utilities

XTemplate, Ext.Array,Ext.Object, Ext.String,Ext.Function, Ext.Date,

...


Class System


Dynamic Loader


Momentum Scroller


Delegated Event System


Gesture Recognition


Ext.data

Investigating


Charts

Charts - Today

Ext JS

Ext.chart

SenchaTouchExt.chart

Charts - Today

Ext JS

Charts - Ext JS Today

Designed for Desktop


Mouse Input


Plenty of Memory & CPU

Charts - Today

Sencha Touch

Charts - Touch Today

Designed for Touch Input


Constrained Memory


Limited CPU


Large Datasets

Charts - Going Forward

Unification

Leverage Gains

Easy Migration

Charts

Ext JS

ext-chartsExt.chart

SenchaTouchExt.chartsencha-charts

Today

Packages

Sencha Touch

NewThemes

Blackberry 10

Cordova /PhoneGap

Ext.device.*

sencha cordova init

sencha phonegap init

TouchGrid

Demo

Ext JS

TouchEvents

tapswipe

pinch

touchmove

touchstart/end

longpressrotate

doubletap

tapcancel

singletap

pinchstart/end

rotatestart/end

drag

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

Translated

Grid

CellUpdating

Custom Rendererscolumns: [{ 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>'; }}]

Anatomy of a Grid Cell

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

Grid Updates Today

record.set('field', 42);

Grid Updates Today

Render

The Cell

...Again

Grid Updates Today


?

Grid Updates TodayThe full signature for renderer is:

function (value, cellData, // problem #1 record, rowIndex, columnIndex, store, view);

Grid Updates Today

cellData.innerCls

vs.

<div>

Grid Updates Today


?

Grid Updates Today

cellData.tdCls

vs.

<td>

Grid Updates Today


Grid Updates Today

Not so bad

?

Grid Updates Today

record.set('other', 2);

Grid Updates TodayThe full signature for renderer is:

function (value, cellData, record, // problem #2 rowIndex, columnIndex, store, view);

Grid Updates Today

When

Any

Field Changes?!

Grid Cell Updaters

update !== render

Grid Cell Updaterscolumns: [{ 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'); }}]

Grid Cell Updaters

Minimal DOM

Change

Grid Cell Updaters

Only When

Needed

BufferedUpdates

Buffered Updates

Configure

Maximum

Rate

Buffered Updates

Tracks

Field

Changes

Gadgets

Gadgets

ThinkFlyweight

Components

Gadgets

Minimal Life-cycle

Gadgets

Data Bound

Gadgets

Gadget el0

childEl childEl

elel1

childEl childEl

+data

+data

Gadgets

DeclarativeListeners

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

Gadgets

Listenersin

childEls

Gadgets

Eventsare

Delegated

Gadgets

gadget.attach(data, el);

Gadgets - Grid Column

columns: [{ xtype: 'gadgetcolumn', dataIndex: 'status', gadget: 'progressbar'}]

Configured on columns similar to ‘editor’


columns: [{ xtype: 'gadgetcolumn', gadget: { type: 'button', text: 'Remove' }}]


columns: [{ xtype: 'gadgetcolumn', dataIndex: 'size', gadget: 'slider'}]

In some case it can even edit like an ‘editor’


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

Demo

MVCRouting

Address Bar

Controller Methods

http://www.foo.com/app#foo/bar

controller.handleFooBar()

Ext.define('MyApp.controller.Foo', { extend: 'Ext.app.Controller',

config : { routes : { 'foo/bar': 'handleFoo' } },

handleFoo: function () { ... }});

What about Parameters?

http://www.foo.com/app#foo/bar/42

controller.handleFooBar(42)

config : { routes : { 'foo/bar/:id': 'handleFooBar' } },

handleFooBar: function (id) { ... }

Validating Actions

config : { routes : { 'foo/bar/:id': { action: 'handleFoo', before: 'beforeFoo' } } },

beforeFoo: function (id, action) { ... validate action ... }

Forms

Ext.picker.Color

Ext.button.Segmented

Ext.form.field.Tag

Demo

BorderLayout

Region Groups

Shared space for Regions

Group Arrangement

TabsBoxes

Accordion

Stateful

Item Persistence

Demo

Conclusion

• Contact Info- [email protected] @dongryphon

Technology

What's Coming Next in Sencha Frameworks