What's Coming Next in Sencha Frameworks
Upcoming SlideShare
Loading in...5
×
 

What's Coming Next in Sencha Frameworks

on

  • 1,210 views

Don Griffin at ModUX 2013

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

Statistics

Views

Total Views
1,210
Views on SlideShare
901
Embed Views
309

Actions

Likes
0
Downloads
5
Comments
0

3 Embeds 309

http://lanyrd.com 306
http://news.google.com 2
http://www.feedspot.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

What's Coming Next in Sencha Frameworks What's Coming Next in Sencha Frameworks Presentation Transcript

  • What’s Coming Next in Sencha Frameworks
  • Don Griffin Engineering Manager don@sencha.com @dongryphon
  • Framework Goals
  • Awesome Apps Scalable Development Device Compatibility Goals
  • Common Core
  • sencha-core
  • sencha-core Goals
  • Consistency Compatibility sencha-core : Goals
  • sencha-core Content
  • sencha-core : Content Feature / Environment Detection 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 Sencha Touch Ext.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 Sencha Touch Ext.chartsencha-charts Today Packages
  • Sencha Touch
  • New Themes
  • Blackberry 10
  • Cordova / PhoneGap
  • Ext.device.*
  • sencha  cordova  init
  • sencha  phonegap  init
  • Touch Grid
  • Demo
  • Ext JS
  • Touch Events
  • tap swipe pinch touchmove touchstart/end longpress rotate doubletap tapcancel singletap pinchstart/end rotatestart/end drag
  • el.on({      click:  this.onClick }); el.on({      tap:  this.onClick }); Translated
  • Grid
  • Cell Updating
  • 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>';      } }]
  • 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 Today The 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 Today The 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 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');      } }]
  • Grid Cell Updaters Minimal DOM Change
  • Grid Cell Updaters Only When Needed
  • Buffered Updates
  • Buffered Updates Configure Maximum Rate
  • Buffered Updates Tracks Field Changes
  • Gadgets
  • Gadgets Think Flyweight Components
  • Gadgets Minimal Life-cycle
  • Gadgets Data Bound
  • Gadgets Gadget el0 childEl childEl el el1 childEl childEl +data +data
  • Gadgets Declarative Listeners
  • Gadgets Ext.define('Ext.gadget.Slider',        extend:  'Ext.gadget.Gadget', ...        listeners:  {                mousedown:  'onMouseDown',                dragstart:  'cancelDrag',                drag:  'cancelDrag',                dragend:  'cancelDrag'        },
  • Gadgets Listeners in childEls
  • Gadgets Events are 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
  • MVC Routing
  • 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
  • Border Layout
  • Region Groups Shared space for Regions
  • Group Arrangement Tabs Boxes Accordion
  • Stateful Item Persistence
  • Demo
  • Conclusion • Contact Info - don@sencha.com - @dongryphon