Universal Ext.TitleBar title not changing

[jcming]

Hi friends,

I am trying to create a universal titlebar with a back button for my application. I am including it in the various views by using {xclass:mUserStories.view.titlebar}.

Here is the code for the 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
        }]
    }
})

However, when I try to dynamically change the toolbar when switching to different pages, the console.log of the titlebar says the _title has changed but the text on the titlebar and the "hidden" property of the button does not change.

Here is the code for the logic that occurs when the button is pressed to switch the page:

toPage: function (arg) {
    var t = this.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);
}

I have also tried to include a ref at the top for Narwhal : '#narwhal' and use var t = this.getNarwhal(), but this does not work either.

I am not sure if the problem lies with where the id is being kept, how the id is being called, or because the page is not refreshing properly. Any advice would help!

Thank you for your time

[sword-it]

Hi jcming,
I think you should not use 'this' while you are getting toolbar by getCmp(). I made a little change in the code that you provided, review the following code:

toPage: function (arg) {
    //  var t = this.Ext.getCmp('narwhal');   // your code
    var t = Ext.getCmp('narwhal');  // removed 'this' keyword from the above line.
    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);
}

[jcming]

Oops I mistyped, I meant to say I have this code:

var t = Ext.getCmp('narwhal')

[sword-it]

If it is not working then, you may review the following simple example:

Ext.Viewport.add({
    xtype: 'titlebar',
    id: 'myTitleBar',
    docked: 'top',
    title: 'Navigation',
    items: [
        {
            xtype: 'button'
            , text: 'change title'
            , handler: function(){
                var cmp = Ext.getCmp('myTitleBar');
                var btn = Ext.getCmp('backButton');
    			cmp.setTitle('title changes');
                btn.show();
            }
        },
        {
            xtype: 'button'
            , id: 'backButton'
            , text: 'back button'
            , hidden: true
        }
    ]
});
Ext.Viewport.setHtml('This shows a demo to change the title of titlebar');

If this not solves your problem, then let me know you code, in which event you are calling the toPage() in you code ?

[jcming]

So I'm trying to keep most of the logic within the controller and using refs. Is it necessary to include the handler in the view for the button in the view? Relevant excerpts of my code are:

Ext.define('mUserStories.controller.basic', {	extend: 'Ext.app.Controller',
	controllers: ['basic'],
	views: ['loginScreen', 'patientList'],
	config: {
		refs: {
			ok: '#okButton'
		},
		control: {
			ok: {
				tap: function () {
					this.doOption(true)
				}
			}
		}
	},
	launch: function () {
		Ext.create('Ext.Container', {
			id: 'viewPort',
			fullscreen: true,
			layout: 'card',
			items: [{
				xclass: 'mUserStories.view.loginScreen'
			}, {
				xclass: 'mUserStories.view.patientList'
			}]
		})
	},
	doOption: function (arg) {
		var active = Ext.getCmp('viewPort').getActiveItem();
		if (active.getActiveItem() === PAGES.LOGIN_SCREEN) {
			this.doLogin(arg)
		}
	},
	doLogin: function (arg) {
		if (arg) {
			// Login logic
			this.LoginContinue();
		}
	},
	loginContinue: function () {
		this.toPage(PAGES.PATIENT_LIST)
	}
})

[jcming]

Or is there a better way to generate a universal toolbar, such as generating the title text dynamically? Thanks!

[bluehipy]

You should use http://docs.sencha.com/touch/2-0/#!/...avigation.View which is already implementing the functionality you are describing.

How so ever it is better to keep views clean and move logic to controllers. Also I would not use the launch method of custom controllers to create the main view but rather the application launch method (application being a special controller) or routes if you are planning to use them