ExtJS 5.1 : Binding record value to component property

Question

假设我有一个 ViewController、ViewModel 和我的 View。在 View 中，我有一个获取已加载记录的表单面板。当这条记录加载到表单中时，我想根据记录的 status 隐藏或显示一个按钮场，所以我想用绑定(bind)做点什么。但是，看起来绑定(bind)仅限于反转，而不是实际使用表达式。为了更好地理解，请查看 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。无论如何我可以通过绑定(bind)或其他方法来实现这一点吗？值得注意的是，我还查看了公式，但据我了解，这仅用于更改数据的呈现方式，因此它似乎不是正确的路线。

Answer 1

如果您的记录是 View 模型数据的一部分 - 使用 formulas ， 像:

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

然后在您看来，您可以绑定(bind):

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

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