refresh/populate panel with ST2.3

Question

I'm trying to update a panel after data changes. I have an list with some data:

Ext.define('MyApp.view.events.MyEventsList', {
  extend: 'Ext.List',
  alias : 'widget.myeventslist',
  xtype : 'myeventslist',
  config: {
    disableSelection: true,
    useSimpleItems: true,
    pressedDelay: 0,
    title: 'Events',
    id: 'myeventslist',
    itemTpl: new Ext.XTemplate(
      '<div class=""><b>{event_name}</b></div>',
      '<div class="">Location: {location_name}</div>',
      '<div class="">Datum: {[this.convert(values.date_from)]}</div>',
    ),
    store: 'eventsStore',
    grouped: false,
    onItemDisclosure: true
  }
});

When a item gets tapped I show an panel:

me.getMain().push({
  xtype: 'eventdetail',
  data: record.data,
  title: record.data.event_name
});



Ext.define('MyApp.view.events.EventDetail', {
  extend: 'Ext.Container',
  alias: 'widget.eventdetail',
  xtype: 'eventdetail',
  config: {
    refs: {
      main:   '#main'
    },
    styleHtmlContent: true,
    showAnimation: 'slideIn',
    xtype: 'panel',
    id: 'eventdetail',
    tpl: new Ext.XTemplate(
      '<div class=""><center><b>{event_name}</b></center></div>',
      '<div class="">Location: {location_name}</div>',

  })
},
...

And an edit icon at the topbar of the NavigationView. It shows an form and submit button to change the data of the panel.

My Problem is now: Wenn I hit the submit button in the form to change the values, it sends an request to the webserver and updates the store. Then the edit-form gets popped (Nav.pop). But I see still the old data in the detail panel.

When I go back to the list and tap the listitem again the new data shows up.

How can I update the panel with the new data?

Answer 1

The problem is in the way you are getting data to the view, using data:data. You should refactor your view to use a store for the data. Then you can simply call store.load() where you need it.

Otherwise you will have to do something like this:

    //first change your id to itemId, you will thank me later

    var view = Ext.ComponentQuery.query('dataview[itemId=myeventslist]')[0];
    var newData = Ext.getStore('eventsStore');
    view.setData(newData.data.all[0].data);   //something like that - you can play with it in the console