假设我有一个 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)或其他方法来实现这一点吗?值得注意的是,我还查看了公式,但据我了解,这仅用于更改数据的呈现方式,因此它似乎不是正确的路线。
最佳答案
如果您的记录是 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
关于ExtJS 5.1 : Binding record value to component property,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30065978/