Question

假设我有一个ViewController，ViewModel和我的View。在视图中，我有一个表单面板，可以获取加载的记录。当此记录加载到表单中时，我想隐藏或显示基于记录的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：将记录值绑定到组件属性

1 个答案: