ExtJS 5.1：将记录值绑定到组件属性 [英] ExtJS 5.1: Binding record value to component property

问题描述

假设我有一个ViewController，ViewModel和我的View。在视图中，我有一个表单面板获取加载的记录。当这个记录加载到表单中时，我想根据记录的状态字段隐藏或显示一个按钮，所以我想到做一些绑定。然而，看起来绑定只限于反转，而不是实际使用表达式。要更好地了解，请查看此代码：

  Ext.application（{
 name：'Fiddle'，
 
 launch：function（）{
 Ext.define（'User'，{
 extends：'Ext.data.Model'，
 fields：['name'，'status'] 
}）; 
 
 Ext.define（'UserListController'，{
 extends：'Ext.app.ViewController'，
 alias：'controller.userlist'
}）; 
 
 Ext.define（'UserListViewModel'，{
 extends：'Ext.app.ViewModel'，
 alias：'viewmodel.userlist'
}）; 
 
 Ext.define（'UserList'，{
 extends：'Ext.form.Panel'，
 controller：'userlist'，
 viewModel：'userlist'，
 
 tbar：[{
 text：'Add'， 
参考：'addButton'，
 bind：{
 // hidden：'{status == 2}'
} 
}，{
文本：'删除'，
引用：'deleteButton'，
 bind：{
 //隐藏：'{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。有没有办法用绑定或其他方法来完成这个？很高兴地注意到，我也看过公式，但是从我的理解来看，这只是为了改变数据的呈现方式，所以看起来不是正确的路线。

解决方案

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

  formula：{
 hideDeleteButton：function（getter）{
 return getter（'record.status'）=== 2; 
}，
 hideAddButton：function（getter）{
 return getter（'record.status'）=== 1; 
} 
} 
  

然后在你的视图中你可以绑定： p>

  {
文本：'添加'，
引用：'addButton'，
 bind：{ 
 hidden：'{hideAddButton}'
} 
}，{
 text：'Delete'，
 reference：'deleteButton'，
 bind： 
 hidden：'{hideDeleteButton}'
} 
} 
  

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

Let's say I've got a ViewController, ViewModel, and my View. In the View, I've got a form panel that gets a loaded record. When this record loads into the form, I want to hide or show a button based on the record's status field, so I figured do something with binding. However, it looks like binding is limited to only inverting, not actually using an expression. To get a better understanding, take a look at 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();
        }
    }
});

As you can see, I'm currently just probing the values of the record to hide the addButton. Is there anyway I can accomplish this with binding or some other approach? It's good to note that I also looked at formulas, but from what I'm understanding, that's only for changing how data is rendered, so it didn't seem like the proper route.

解决方案

If your record is part of the view model data - use formulas, like:

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

And then in your view you can bind:

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

A working example: https://fiddle.sencha.com/#fiddle/mcg

这篇关于ExtJS 5.1：将记录值绑定到组件属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！