ExtJs 6:如何在两个网格之间绑定数据?
ExtJs 6: How to bind data between two grids?
我的主面板中有 3 个项目 (Main.js):
- 表格(显示 Grid1 选定行的数据)
- Grid1 -Ext.grid.Panel(从 JSON 文件获取数据)
- Grid2 -Ext.grid.Panel(应显示 Grid1 中所选行的某些列)
所有 3 个视图共享与 Main.js 关联的相同 MainModel.js。
我可以使用公式将 Grid1 数据绑定到表单:
formulas: {
someVal: {
bind: '{employeeDetails.selection}', //reference to grid1
get: function(item){
return item;
}
},
表格-
items:[
{
xtype: 'form',
title: 'Form',
defaultType: 'textfield',
items: [
{
xtype: 'displayfield',
fieldLabel: 'ID',
bind: '{someVal.id}'
}, //...
但是我找不到任何方法在 Grid1 和 Grid2 之间做同样的事情。我用谷歌搜索了几个小时。 ExtJs 网格的唯一数据源似乎是存储。除了使用商店之外,基本上还有什么方法可以填充网格。我们可以在列内使用绑定吗?谢谢
编辑:
更新的选择公式:
myStoreDataFormula: {
bind:{
bindTo:'{employeeDetails.selection}',
deep:true
},
get: function(employee){
if(employee!=null){
var empArray = [];
empArray.push(employee.data);
return empArray;
}
}
}
使用视图模型中定义的存储时,一个有点模糊的功能是,您可以使用“{ ... }”小胡子绑定到其他视图模型字段/公式或组件配置,而不是定义具体值通过他们的参考发布(我个人发现这对于将路径变量放入商店代理的 url 最有用)。
这是网格绑定到存储的示例,它又将数据绑定到公式:
Ext.define('MyView', {
viewModel: {
stores: {
myStore: {
fields: ['name'],
data: '{myStoreDataFormula}'
}
},
formulas: {
myStoreDataFormula: function(get) {
return [{
name: 'Foo'
}, {
name: 'Bar'
}];
}
}
},
extend: 'Ext.grid.Panel',
xtype: 'MyView',
bind: {
store: '{myStore}'
},
columns:[{
dataIndex: 'name',
flex: 1
}]
});
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create({
xtype: 'MyView',
width: 300,
height: 300,
renderTo: Ext.getBody()
});
}
});
是的,这仍然需要您拥有 2 个商店,但是您可以使第二个网格的商店完全依赖于第一个网格已发布的 selection
配置。
我的主面板中有 3 个项目 (Main.js):
- 表格(显示 Grid1 选定行的数据)
- Grid1 -Ext.grid.Panel(从 JSON 文件获取数据)
- Grid2 -Ext.grid.Panel(应显示 Grid1 中所选行的某些列)
所有 3 个视图共享与 Main.js 关联的相同 MainModel.js。
我可以使用公式将 Grid1 数据绑定到表单:
formulas: {
someVal: {
bind: '{employeeDetails.selection}', //reference to grid1
get: function(item){
return item;
}
},
表格-
items:[
{
xtype: 'form',
title: 'Form',
defaultType: 'textfield',
items: [
{
xtype: 'displayfield',
fieldLabel: 'ID',
bind: '{someVal.id}'
}, //...
但是我找不到任何方法在 Grid1 和 Grid2 之间做同样的事情。我用谷歌搜索了几个小时。 ExtJs 网格的唯一数据源似乎是存储。除了使用商店之外,基本上还有什么方法可以填充网格。我们可以在列内使用绑定吗?谢谢
编辑: 更新的选择公式:
myStoreDataFormula: {
bind:{
bindTo:'{employeeDetails.selection}',
deep:true
},
get: function(employee){
if(employee!=null){
var empArray = [];
empArray.push(employee.data);
return empArray;
}
}
}
使用视图模型中定义的存储时,一个有点模糊的功能是,您可以使用“{ ... }”小胡子绑定到其他视图模型字段/公式或组件配置,而不是定义具体值通过他们的参考发布(我个人发现这对于将路径变量放入商店代理的 url 最有用)。
这是网格绑定到存储的示例,它又将数据绑定到公式:
Ext.define('MyView', {
viewModel: {
stores: {
myStore: {
fields: ['name'],
data: '{myStoreDataFormula}'
}
},
formulas: {
myStoreDataFormula: function(get) {
return [{
name: 'Foo'
}, {
name: 'Bar'
}];
}
}
},
extend: 'Ext.grid.Panel',
xtype: 'MyView',
bind: {
store: '{myStore}'
},
columns:[{
dataIndex: 'name',
flex: 1
}]
});
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create({
xtype: 'MyView',
width: 300,
height: 300,
renderTo: Ext.getBody()
});
}
});
是的,这仍然需要您拥有 2 个商店,但是您可以使第二个网格的商店完全依赖于第一个网格已发布的 selection
配置。