Binding values to panel title - extjs

Question

I have a problem when I am binding values to a panel title.
My code basically looks like this :
Ext.define('serviceteamWorkflow.view.core.ServiceteamWorkflow', {
extend: 'Ext.Panel',
bind: {
title: 'First Name : {firstName} Last Name : {lastName}'
},
})
The problem is that nothing shows in the title when one of the bound values is null or undefined. Ie. If one of the bound values is invalid then the whole thing won't show.
I would like to just show nothing if the bound value is invalid. ie :
First Name : Last Name : Doe
Is there a way around this?

Answer 1

You could create a formula that would reference your bindings in your view model:
Ext.define('serviceteamWorkflow.view.core.ServiceteamWorkflow', {
extend: 'Ext.Panel',
bind: {
title: {showTitle}
},
})
Then inside your ServiceteamWorkflow view model:
requires: [
'Ext.app.bind.Formula'
],
data: {
firstName: '',
lastName: 'Johnson'
},
formulas: {
showTitle: function(get) {
var firstName = get('firstName'),
lastName = get('lastName');
return "First Name : " + firstName + " Last Name: " + lastName;
}
}

Answer 2

For those who are like me wondering how to set default values to viewmodel as suggested by Evan Trimboli in the first comment, it should be set in a view:
viewModel: {
data: {
firstName: '',
lastName: ''
}
}
If you set your data somewhere dynamically, for example:
this.getViewModel().set('fullName', data);
you need to set defaults like this:
viewModel: {
data: {
fullName: {
firstName: '',
lastName: ''
}
}
}