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

  })
},
...

NavigationView顶部栏中的编辑图标。它显示一个表单和提交按钮，用于更改面板的数据。

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

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

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

Answer 1

问题在于您使用数据获取数据到视图的方式：数据。您应该重构视图以使用商店来存储数据。然后你可以在需要的地方调用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

Answer 2

在弹出MyEventList视图之前，请尝试等待加载商店。

var eventsStore = Ext.getStore('eventsStore');
eventStore.load(function(records) {
    // Pop the list view here..
}

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

2 个答案: