将值绑定到面板标题答案

【问题标题】：Binding values to panel title将值绑定到面板标题
【发布时间】：2016-10-11 05:48:53
【问题描述】：

我在将值绑定到面板标题时遇到问题。

我的代码基本上是这样的：

Ext.define('serviceteamWorkflow.view.core.ServiceteamWorkflow', {
    extend: 'Ext.Panel',
    bind: {
        title: 'First Name : {firstName} Last Name : {lastName}'
    },

})

问题是当绑定值之一为空或未定义时，标题中没有显示任何内容。 IE。如果其中一个绑定值无效，则整个内容都不会显示。

如果绑定值无效，我只想不显示任何内容。即：

名字：姓氏：Doe

有没有办法解决这个问题？

【问题讨论】：

默认视图模型数据中的名字/姓氏值为空字符串。
你也可以用公式解决这个问题吗？
我猜，但提供默认值更容易。
谢谢！有用。您可以添加一个正确的答案以便我接受吗？

标签： extjs extjs6

【解决方案1】：

您可以创建一个公式来引用您的视图模型中的绑定：

Ext.define('serviceteamWorkflow.view.core.ServiceteamWorkflow', {
extend: 'Ext.Panel',
bind: {
    title: {showTitle}
},

})

然后在您的 ServiceteamWorkflow 视图模型中：

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

【讨论】：

这与在OP中绑定标题完全相同。 get() 调用以相同的方式创建依赖关系。
是的，但这会在 showTitle 中显示整个字符串减去丢失的名字
所以将添加默认的空值。

【解决方案2】：

对于那些像我一样想知道如何按照 Evan Trimboli 在第一条评论中的建议为 viewmodel 设置默认值的人，应该在视图中设置它：

viewModel: {
    data: {
        firstName: '',
        lastName: ''
    }
}

如果您在某处动态设置数据，例如：

this.getViewModel().set('fullName', data);

你需要像这样设置默认值：

viewModel: {
    data: {
        fullName: {
            firstName: '',
            lastName: ''
        }
    }
}

【讨论】：