Question

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

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

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

})

问题是当其中一个绑定值为null或未定义时，标题中不显示任何内容。 IE浏览器。如果其中一个绑定值无效，则整个事物将不会显示。

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

名字：姓氏：Doe

有解决方法吗？

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

Answer 2

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

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

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

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

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

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

将值绑定到面板标题

2 个答案: