当变量发生变化时更新一组面板

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

并对所有面板重复该操作。需要有一个更清洁的解决方案，一种更新用户界面的方法。

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

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

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