what's coming next in sencha frameworks

What’s ComingNext in

Sencha Frameworks

Don GriffinEngineering Manager

don@sencha.com@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,

...

sencha-core : Content

Class System

sencha-core : Content

Dynamic Loader

sencha-core : Content

Momentum Scroller

sencha-core : Content

Delegated Event System

sencha-core : Content

Gesture Recognition

sencha-core : Content

Ext.data

Investigating

sencha-core : Content

Charts

Charts - Today

Ext JS

Ext.chart

SenchaTouchExt.chart

Charts - Today

Ext JS

Charts - Ext JS Today

Designed for Desktop

Charts - Ext JS Today

Mouse Input

Charts - Ext JS Today

Plenty of Memory & CPU

Charts - Today

Sencha Touch

Charts - Touch Today

Designed for Touch Input

Charts - Touch Today

Constrained Memory

Charts - Touch Today

Limited CPU

Charts - Touch Today

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

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

?

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

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

?

Grid Updates Today

cellData.tdCls

vs.

<td>

Grid Updates Today

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

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’

Gadgets - Grid Column

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

Gadgets - Grid Column

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

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

Gadgets - Grid Column

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- don@sencha.com- @dongryphon