我的主面板中有 3 个项目(主.js):
- 窗体(显示 Grid1 选定行中的数据)
- Grid1 -Ext.grid.Panel (从 JSON 文件获取数据)
- Grid2 -Ext.grid.Panel(应显示 Grid1 中选定行中的一些列)
所有 3 个视图共享相同的主模型.js与主模型.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}'
}, //...
但是我找不到任何方法可以在网格 1 和网格 2 之间做同样的事情。我用谷歌搜索了几个小时。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
配置。