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([
...

2 comments:

DaNmarner said...

This gotcha puzzled me so hard. Thanks!

Will said...

Oh good. Sorry took me so long to approve your post. :(

Copyright 2011 by William Cain