ExtJS:网格和表单之间的双向绑定
ExtJS: Two way binding between Grid & Form
我正在尝试学习ExtJS,但有点被困在一个地方。我想创建一个顶部带有网格,底部有一个表单的屏幕。我想将它们彼此绑定,以便当我从 Grid 中选择一行时,将填充表单字段(网格中的相同记录),并且当我更改网格或表单中的任何内容时,另一侧会更新。
到目前为止,我有一个带有网格和表单的视图。我有一个向网格提供数据的商店。我被困在这里。如何在表单和网格之间进行双向绑定。我尝试了谷歌,在这里和这里找到了一些样本,但它们都是单向绑定的。即如果我在网格上执行以下操作:
listeners: {
selectionchange: function(model, records) {
var rec = records[0];
var form = Ext.getCmp('chartofaccountsForm');
form.loadRecord(rec);
}
}
它仅使用当前选定的记录填充表单,但是当我更新表单中的记录时,网格不会更新。
谁能帮我指出正确的方向?任何教程或博客文章都会非常有帮助
试试这个例子:
Ext.widget('container',{
width: 600,
hight: 800,
renderTo: Ext.getBody(),
viewModel: {
formulas: {
selection: {
bind: '{g.selection}',
get: function(selection){
return selection;
}
}
}
},
items: [
{
xtype: 'grid',
title: 'Grid',
reference: 'g',
store: {
type: 'store',
fields: ['id', 'name'],
data: [{id: 1, name: 'foo'}, {id: 2, name: 'bar'}]
},
columns: [
{dataIndex: 'id', header: 'ID'},
{dataIndex: 'name', header: 'Name'}
]
},
{
xtype: 'form',
title: 'Form',
items: [
{
xtype: 'displayfield',
fieldLabel: 'ID',
bind: '{selection.id}'
},
{
xtype: 'textfield',
fieldLabel: 'Name',
bind: '{selection.name}'
}
],
bind: {
hidden: '{!selection}'
}
}
]
});
https://fiddle.sencha.com/#fiddle/179d
相关文章:
- JavaScriptV5中的绑定和JQuery之间有任何关系吗
- 直接绑定和使用每个函数之间的区别
- 工厂和控制器之间的“绑定”
- 隔离作用域+绑定名称和仅在AngularJS中的隔离作用域之间的差异
- 绑定返回的结果和使用function()的结果之间有什么区别
- 父关系指令和子关系指令之间的绑定
- 控制器和外部指令之间的双向数据绑定
- AngularJS:图片上传+文件阅读器预览.控制器、指令和作用域之间的绑定出现问题
- 在 Angular 中的控制器之间绑定数据
- ExtJS:网格和表单之间的双向绑定
- AngularJS Modal 中控制器之间的双向绑定
- 两个网络组件之间的绑定:谷歌地图+地理定位
- jQuery和纯Javascript中的指针事件绑定之间的区别
- 尝试实现 ng-repeate 和表单之间的双向绑定
- 为什么角度绑定在传入时会中断指令之间的绑定
- 发布绑定/监视两个控制器之间共享的服务变量
- 指令之间没有数据绑定's的范围及其's模板
- Angularjs-控制器和视图之间的绑定
- AngularJS如何在服务和控制器之间建立双向数据绑定
- 用JavaScript将事件侦听器绑定到特定日期和时间之间的提交表单