Extjs 将值绑定到面板标题

将值绑定到面板标题时出现问题

我的代码基本上如下所示：

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

})

问题是，当其中一个绑定值为null或未定义时，标题中不会显示任何内容。如果其中一个绑定值无效，那么整个内容将不会显示

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

名：姓：Doe

---

有办法解决这个问题吗？

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

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

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

})

然后在ServiceteamWorkflow视图模型中：

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

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

---

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

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

如果动态地将数据设置在某个位置，例如：

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

您需要如下设置默认值：

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

---

将viewmodel数据中的firstName/lastName值默认为空字符串。您也可以使用公式解决此问题吗？我猜，但提供默认值更容易。谢谢！它起作用了。你能添加一个正确的答案让我接受吗？这与像OP中那样绑定标题完全相同。

get（）

调用以相同的方式创建依赖项。是的，但这将显示showTitle中的整个字符串减去缺少的第一个名称，然后添加默认的空值。