The Once and Future Grid
-
Upload
stefan-stoelzle -
Category
Technology
-
view
21 -
download
0
Transcript of 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