extjs 5 如何将商店绑定到模态窗口和网格

Posted 2023-02-26

【中文标题】extjs 5 如何将商店绑定到模态窗口和网格

【英文标题】：extjs 5 how to bind store to modal window and grid

【发布时间】：2014-09-19 09:11:51

【问题描述】：

这种情况很常见，当您在网格中单击一个单元格时，会出现带有表单的模态窗口，在那里您进行更改，单击“保存”按钮，然后更新网格中的存储。在第 4 次中，我通过从网格到表单的 loadRecord 完成了它，然后使用 set-method 将更改应用于网格存储。现在我正在尝试使用 MVVM 方法来实现它，并且遇到了一些问题。因为当我将相同的虚拟机设置为网格和表单时，在表单销毁（保存或取消按钮）之后，虚拟机也在销毁，应用程序也被破坏了。因此，我们不能在多个组件中使用一个 VM 实例。我们必须将它放在一个容器中，其中有一个网格和一个表单。所有官方的例子都是这种类型。 问题是，是否有人解决了这个问题？fiddleanswer from sencha forum

【参考方案1】：

ExtJs 5 ViewModel 具有嵌套结构组件，所有子对象都可以使用父级的 ViewModel。所以你可以尝试将 window 对象添加到 ViewController 视图中：

var form = Ext.create('Plus.view.FormbetV');
var window = Ext.create('Ext.Window', 
    frame: true,
    width: 350,
    height: 200,
    modal: true,
    layout: 'fit'
);
window.add(form);
this.getView().add(window); // <--- add parent 'scope'
window.show();

别忘了删除这段代码：

//var viewModel = Ext.getCmp('gridbet').getViewModel();
//this.setViewModel(viewModel);

它适用于我，但在这种情况下，窗口大小将受到网格大小的限制。

【讨论】：

我喜欢您的解决方案，但似乎窗口标题有问题 - 没有看到。

感谢您的解决方案，有趣的方式！要修复窗口标题，我们可以使用height: 300 作为网格，然后删除 gridbet ViewModel 的公式。但无论如何，模态窗口都会被破坏。

【参考方案2】：

除了user1638582的回答外，我自己的解决方案是把选中的记录添加到表单的ViewModel中：

var form = Ext.create('Plus.view.FormbetV',
   viewModel: 
       data:
          currentRec:this.getView().getSelectionModel().getSelection()[0]
       
   
);

https://fiddle.sencha.com/#fiddle/jp6

【参考方案3】：

查看示例，“数据绑定 -> 隔离子会话”似乎是我们正在寻找的：

http://dev.sencha.com/ext/5.1.0/examples/kitchensink/#binding-child-session

【参考方案4】：

您是否阅读过this blog post，其中使用了MVVM example 表示网格？

【讨论】：

是的，谢谢，但在我看来，这不是纯粹的 MVVM 方法，而是与 MVC 结合使用，因为您使用全局控制器，并且不要使用“绑定”指令将存储绑定到网格.我对如何通过通用 VM 以模式形式和网格绑定数据的方式感兴趣。因为根据文档，这是不可能的。

根据 Evan 在您的论坛帖子中的观点，两个组件不能共享同一个 ViewModel。