Sencha Touch 2.0: универсальный заголовок Ext.TitleBar не меняется

Я пытаюсь создать универсальную панель заголовка с кнопкой «Назад» для своего приложения. Я включаю его в различные представления, используя {xclass:mUserStories.view.titlebar}.

Вот код заголовка:

Ext.define('mUserStories.view.titlebar', {
    extend: 'Ext.TitleBar',
    id: 'narwhal',
    config: {
        docked: 'top',
        // id: 'narwhal',
        title: 'CHW Module',
        items: [{
            ui: 'back',
            text: 'Back',
            id: 'backButton'
            // hidden: true
        }]
    }
})

Однако, когда я пытаюсь динамически изменить панель инструментов при переключении на разные страницы, console.log панели заголовка говорит, что _title изменился, но текст в строке заголовка и «скрытое» свойство кнопки не меняется.

Вот код логики, возникающей при нажатии кнопки переключения страницы:

toPage: function (arg) {
    var t = Ext.getCmp('narwhal');
    var b = Ext.getCmp('backButton');
    console.log(t,b)
    if (arg === PAGES.PATIENT_LIST) {
        t.setTitle('Patient List');
        b.setHidden(true)
    }
    Ext.getCmp('viewPort').setActiveItem(arg);
}

Я также пытался включить ссылку вверху для Narwhal: '#narwhal' и использовать var t = this.getNarwhal(), но это тоже не работает.

Я не уверен, что проблема заключается в том, где хранится идентификатор, как он вызывается, или в том, что страница не обновляется должным образом. Любой совет поможет!

Спасибо за уделенное время :)