the once and future grid

Don GriffinDirector of Engineering, Sencha

@dongryphon

The Onceand

Future Grid

Goals

Building BlocksMapping ConceptsBring It Together

Modern Grid

Architectural Focus for 6.0

Modern Grid Architecture

Multi-Device InputCore Data

DOM ScrollerData Binding

The Grid That Was…

XTemplates + cell renderers

(simple DOM replacement)

The Grid That Was…

But…

DOM is SLOW

The Grid That Is…

XTemplates + cell renderers + cell updaters

+ minimal re-render+ minimal DOM copy

+ buffered view updates+ field dependencies

The Grid That Is…

An Optimization Challenge

Renderers

{xtype:  'grid',

columns:  [{renderer:  function  (value,  meta,  rec)  {

return  rec.get('firstName')  +  '  '  +rec.get('lastName');

}}]

}

The Grid That Is…

“What needs updating?”

Field Dependency

{extend:  'Ext.data.Model',

fields:  [...,  {name:  'fullName',

convert:  function  (value,  rec)  {return  rec.data.firstName +  '  '  +

rec.data.lastName;},depends:  ['firstName',  'lastName']

}]}

Field Dependency

{extend:  'Ext.data.Model',

fields:  [...,  {name:  'fullName',

calculate:  function  (data)  {return  data.firstName +  '  '  +

data.lastName;}

}]

}

The Grid That Will Be…

Ext.List+ Configs

+ Data binding

Also Is…

Where’s All The Magic Gone?

XTemplates + cell renderers

Cell updatersMinimal re-renderMinimal DOM copy

Buffered view updatesField dependencies

Ext.ListExt.grid.Row

Ext.grid.cell.*

Configs

Data binding

Config Mojo

Ext.define('Ext.Widget',  {

config:  {cls:  null,...

},...

updateCls:  function  (cls,  oldCls)  {this.element.replaceCls(oldCls,  cls);

}});

getClssetCls

The Standard Setter

setCls:  function  (value)  {var oldValue =  this._cls;

if  (this.applyCls)  {value  =  this.applyCls(value,  oldValue);

}if  (value  !==  this._cls)  {

this._cls =  value;if  (this.updateCls)  {

this.updateCls(value,  oldValue);

}}

}

Transformvalues

Manageside-effects

Rows

Grid extends ListExt.define('Ext.grid.Grid',  {

extend:  'Ext.List',xtype:  'grid',

config:  {defaultType:  'gridrow',infinite:  true

}});

Creates anExt.grid.Row

to display records

Rows Are Containers of Cells

Not exactly…

Row extends Component

Ext.define('Ext.grid.Row',  {extend:  'Ext.Component',xtype:  'gridrow',

...});

Rows Are Cell Containers

add() and remove() - Noadd and remove events - No

Hierarchy – YesViewModels - Yes

Row

Grid is a List of Rows

Row

Row

Row

Row

Row

VisibleSpares

Grid is a List of Rows

Row

Row

Row

Rowsc

roll

[0]

[1]

[2]

[3]

[4]

setRecord(rec[4])

updateRecord

Ext.define('Ext.grid.Row',  {...

updateRecord:  function  (rec)  {var vm =  this.getViewModel();if  (vm)  {

vm.set('record',  rec);}

}});

Styling Rows

Classic

items:  [{xtype:  'grid',viewConfig:  {

getRowClass:  function  (rec)  {return  rec.get("valid")  ?  "row-­‐valid"  :  "row-­‐error";

}}

}

Modernitems:  [{

xtype:  'grid',itemConfig:  {

cls:  'row-­‐class',bind:  {

cls:  '{rowClsFormula}'},viewModel:  {

type:  'row-­‐model'}

}

Configures eachExt.grid.Row

Cells

columnsdrive cell

creation and order

Columnsitems:  [{

xtype:  'grid',columns:  [{

//  xtype:  'column',text:  'Heading',cell:  {

//  xtype:  'gridcell',cls:  'mycell'

}}]

CellConfiguration

ai

Grid Columns

bi ci

A B C

rows[i]

headerxtype:  'grid',columns:  [{

text:  '...',cell:  {...}

}]

Base

Text Boolean

Cell

Date

NumberWidget

Cell Classes

Widgets in Cellsitems:  [{

xtype:  'grid',columns:  [{

cell:  {xtype:  'widgetcell',widget:  {

xtype:  'button',bind:  '{record.name}'

}}

}]

WidgetConfiguration

Ext.grid.plugin.*

EditableMultiSelectionPagingToolbarSummaryRowViewOptions

ColumnResizing

https://fiddle.sencha.com/#fiddle/qmn

Demo

Q & A

@dongryphon