EXTJ 5.1:与组件属性的绑定记录值

Question

假设我有一个ViewController，ViewModel和我的视图。在视图中，我有一个表单面板，该面板已加载记录。当此记录加载到表单中时，我想根据记录的status字段隐藏或显示一个按钮，因此我认为使用绑定做某事。但是，看起来绑定仅限于倒转，而不是实际使用表达式。为了更好地理解，请查看此代码：

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: {
    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