Question

我有一组面板（现在三个），它们是同一视图的所有实例。所以他们有很多共同点，比如工具栏和它们上面的按钮。

我在创建工具栏和按钮的文本时定义它们，文本来自变量，如下所示：

App.views.CommonView = Ext.extend(Ext.Panel, {
  initComponent: function() {

    this.backBtn = new Ext.Button({
      text: globalVar,
      handler: this.onBackTap,
      scope: this
    });

    this.toolbar = new Ext.Toolbar({
      title: this.title,
      items: [this.backBtn]
    });
   }
});

anInstanceView: new App.views.CommonView({
    title: globalVar
});

anotherInstanceView: new App.views.CommonView({
    title: globalVar
});

如您所见，按钮文本和工具栏标题依赖于globalVar。

当我改变这个golbalVar的值时，我想一起更新这些文本

globalVar = "new value";
// Somehow update all the button and toolbar texts on all three panels.

我不想手动执行此操作;

App.views.anInstanceView.getDockedItems[0].setTitle(globalVar);

并为所有面板重复一遍。需要一个更清洁的解决方案，一种更新ui的方法。

什么是更清洁的解决方案？感谢。

Answer 1

我会在您的公共视图中创建一个方法，该方法根据globalVar的值为您执行所有更新。然后，您可以在更新globalVar后为每个实例调用此方法，或者创建一个带有'globalvarupdate'事件的全局消息总线，每个实例都可以侦听并更新自身。有些东西......

// somewhere in your app setup
App.messageBus = new Ext.util.Observable();
App.messageBus.addEvents('globalvarupdate');

App.views.CommonView = Ext.extend(Ext.Panel, {
  initComponent: function() {

    this.backBtn = new Ext.Button({
      text: globalVar,
      handler: this.onBackTap,
      scope: this
    });

    this.toolbar = new Ext.Toolbar({
      title: this.title,
      items: [this.backBtn]
    });

      // listen for globalvarupdate on the message bus and do the titles update
      App.messageBus.on('globalvarupdate', this.updateTitles, this);
   },

   updateTitles: function(){
      // do all updates here
   }
});

// when you need to update globalvar
globalvar = 'My New Title';
App.messageBus.fireEvent('globalvarupdate');

该代码完全未经测试，但希望能为您提供可能的方法。

变量更改时更新一组面板

1 个答案: