Binding values to panel title

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?

Default the firstName/lastName values in the viewmodel data to empty string. — Evan Trimboli, Jun 10 '16 at 10:15
thanks! It works. Can you add as a proper answer so I can accept it? — Oliver Watkins, Jun 13 '16 at 15:45

michwalk · Answer 1 · 2016-06-10T14:15:34.537

2

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

edited Jun 10 '16 at 14:15

answered Jun 10 '16 at 14:08

michwalk

323
1
5

That's exactly the same as binding the title like in the OP. The `get()` calls create dependencies in the same fashion. – Evan Trimboli Jun 10 '16 at 14:19
Yes but this will show the entire string in showTitle minus the missing first name – michwalk Jun 10 '16 at 14:31
So will adding default empty values. – Evan Trimboli Jun 11 '16 at 02:14

score 2 · Answer 2 · answered Mar 28 '17 at 07:01

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: ''
        }
    }
}

Binding values to panel title

2 Answers2