Обновите набор панелей при изменении переменной - PullRequest
Новая
       0

Обновите набор панелей при изменении переменной

0 голосов
/ 03 сентября 2011

У меня есть группа панелей (пока три), которые являются экземплярами одного и того же представления. Поэтому у них много общего, например, панель инструментов и кнопки на них.

Я определяю текст панелей инструментов и кнопок при их создании, а текст поступает из переменной, например: 

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

и повторите это для всех панелей. Должно быть более чистое решение, способ обновления пользовательского интерфейса.

Что может быть тем более чистым решением? Спасибо.

1 Ответ

1 голос
/ 03 сентября 2011

Я бы создал метод в вашем общем представлении, который делает все обновления для вас на основе значения 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');

Этот код полностью не проверен, но, надеюсь, даст вам представление о возможном подходе.

...