ExtJS 5.1：将记录值绑定到组件属性

Question

假设我有一个 ViewController、ViewModel 和我的视图。在视图中，我有一个获取加载记录的表单面板。当这条记录加载到表单中时，我想根据记录的 status 字段隐藏或显示一个按钮，所以我想做一些绑定。但是，看起来绑定仅限于反转，而不是实际使用表达式。为了更好地理解，请查看 this code:

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.define('User', {
           extend: 'Ext.data.Model',
           fields: ['name', 'status']    
        });

        Ext.define('UserListController', {
            extend : 'Ext.app.ViewController',
            alias: 'controller.userlist'
        });

        Ext.define('UserListViewModel', {
            extend: 'Ext.app.ViewModel',
            alias: 'viewmodel.userlist'
        });

        Ext.define('UserList', {
            extend: 'Ext.form.Panel',
            controller: 'userlist',
            viewModel: 'userlist',

            tbar: [{
                text: 'Add',
                reference: 'addButton',
                bind: {
                    //hidden: '{status == 2}'
                }
            }, {
                text: 'Delete',
                reference: 'deleteButton',
                bind: {
                    //hidden: '{status == 1}'
                }
            }],
            items: [{
                xtype: 'displayfield',
                name: 'name',
                fieldLabel: 'Name'
            }, {
                xtype: 'displayfield',
                name: 'status',
                fieldLabel: 'Status'
            }]
        });

        var myForm = Ext.create('UserList', {
            width: 400,
            height: 200,
            renderTo: Ext.getBody()
        });

        var record = Ext.create('User', {
            name: 'blah',
            status: 2
        });

        myForm.loadRecord(record);
        if (record.get('status') === 2) {
            myForm.lookupReference('addButton').hide();
        }
    }
});

如您所见，我目前正在探测记录的值以隐藏 addButton。无论如何我可以通过绑定或其他方法来完成这个吗？值得一提的是，我也查看了公式，但据我了解，这只是为了改变数据的呈现方式，所以这似乎不是正确的途径。

Answer 1

如果您的记录是视图模型数据的一部分 - 使用 formulas，例如：

formulas: {
    hideDeleteButton: function (getter) {
        return getter('record.status') === 2;
    },
    hideAddButton: function (getter) {
        return getter('record.status') === 1;
    }
}

然后在您看来您可以绑定：

{
    text: 'Add',
    reference: 'addButton',
    bind: {
        hidden: '{hideAddButton}'
    }
}, {
    text: 'Delete',
    reference: 'deleteButton',
    bind: {
        hidden: '{hideDeleteButton}'
    }
}

一个工作示例：https://fiddle.sencha.com/#fiddle/mcg

ExtJS 5.1：将记录值绑定到组件属性

ExtJS 5.1: Binding record value to component property

data-binding

extjs

mvvm

extjs5

ExtJS 5.1：将记录值绑定到组件 属性

ExtJS 5.1: Binding record value to component property

data-binding

extjs

mvvm

extjs5

ExtJS 5.1：将记录值绑定到组件属性