javascript - 使用 ST2.3 刷新/填充面板

Question

我正在尝试在数据更改后更新面板。 我有一个包含一些数据的列表:

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
  }
});

当点击某个项目时，我会显示一个面板:

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>',

  })
},
...

导航 View 顶部栏有一个编辑图标。 它显示一个表单和提交按钮来更改面板的数据。

我现在的问题是: 我点击表单中的提交按钮来更改值，它向网络服务器发送请求并更新商店。 然后弹出编辑表单(Nav.pop)。 但我在详细信息面板中仍然看到旧数据。

当我返回列表并再次点击列表项时，会显示新数据。

如何使用新数据更新面板？

Answer 1

问题在于您使用 data:data 将数据获取到 View 的方式。您应该重构您的 View 以使用数据存储。然后你可以在需要的地方简单地调用 store.load() 。

否则你将不得不做这样的事情:

    //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