當變量發生變化時更新一組面板

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

該代碼完全未經測試，但希望能爲您提供一種可能方法的想法。