Question

Im trying to populate a custom component using a store (actually a store with local data) in a Sencha Touch 2 project.

My idea is to create one custom component for each element in the store, but actually nothing happens.

I have tried several things but anything works, could you help me? I have done an example to show the problem:

model:

Ext.define('project.model.city', {
  extend: 'Ext.data.Model',
  config: {
    fields: [
      {name: 'country', type: 'string'},
      {name: 'city', type: 'string'}
    ]
  }
});

store:

Ext.define('project.store.cities', {
  extend: 'Ext.data.Store',
  requires: ['project.model.city'],
  model: 'project.model.city',
  autoLoad: true,
  data: [
    { country: 'Germany', city: 'Berlin' },
    { country: 'Italy', city: 'Rome' }
  ]
});

View with store:

Ext.define('project.view.cityAll', {
  extend: 'Ext.Panel',
  xtype: 'cityAllView',
  config: {
    items:[{
      xtype: 'cityItemView',
      store: 'project.store.cities',
    }]
  }
});

Custom component View:

Ext.define('project.view.cityItem', {
  extend: 'Ext.Panel',
  xtype: 'cityItemView',
  config: {
    items: [{
      itemTpl: '{city}'
    }]
  }
});

Answer 1

You need to assign store to cityItemView instead of cityAllView. cityItemView is having template specified and needs to be loaded with data.

Ext.define('project.view.cityItem', {
  extend: 'Ext.Panel',
  xtype: 'cityItemView',
  config: {
    items: [{
      xtype:'list', 
      itemTpl: '{city}'
      store:'project.store.cities'
    }]
  }
});

If you want to set data into panel, then you’d need to call setData(). A panel can not load data from store directly. You can use list view instead so show city, country pair. cityView no longer needed store property that way.

Give this a try.