Tuesday, May 1, 2012

Tip for using Sencha Touch DataView setData() with inline data


Watch out for this gotcha when using Sencha Touch 2.0 DataView with inline data.  DataView.setData() does not swap out existing data.  Instead it appends to the data.  So this code:

var view = Ext.create('Ext.DataView', {
 fullscreen: true,
 store: {
  fields: ['name', 'salary'],
  data: [
   {name: 'Maxine', salary: 200000},
   {name: 'Minnie', salary: 10000}
  ]
 },
 itemTpl: '{name} makes {salary}'
});
view.setData([
 {name: 'Maxine', salary: 200000},
 {name: 'Minnie', salary: 10000},
 {name: 'Me', salary: 999999}
]);


...will end up with 5 records instead of 3.  =(  Strikes me as a bug.

Luckily the fix/work-around is simple.  Call getStore() first:

view.getStore().setData([
...
Copyright 2011 by William Cain