ExtJS：使用同一商店的Master Detail网格

Question

我是ExtJS的新手，我正试图找到自己的方式。我目前正在制作一个POC并且陷入困境。

我正在尝试创建一个主详细信息页面，其中包含一个主网格和一些详细的选项卡，每个选项卡都有一个表单或网格。从顶部主网格中选择记录后，应填充详细网格。问题是，我想为两个网格（主要和细节）使用相同的存储，因为我希望能够进行更改（添加mater行，添加详细信息行，删除行等），然后将这些更改保存为批量。它甚至可能吗？如果是的话，我该如何实现呢？我是否必须使用同一商店或者我可以通过其他方式进行批量编辑吗？

到目前为止，我已尝试将当前选定的行绑定到ViewModel（根据此question）并尝试以下操作将数据绑定到详细网格

<%@ page import="web_browser.HelloWorld"%>

<a href=""  id="web"></a>
$('web').click(function{

<% HelloWorld h=new HelloWorld();
h.main(null);%>

});

任何帮助？

更新1：

在我的商店中，我的数据采用以下格式（因此主要细节的商店相同）

               bind: {
                    data: {
                        bindTo: '{selection.Details}',
                        deep: true
                    }
                }

更新2：

请参阅下图。

这就是我想要实现的目标。我想将商店用于Master-Detail数据。可能吗？如果有，怎么样？

更新3

我创建了一个fiddle来进一步澄清我要求的内容

Answer 1

根据你的小提琴，我添加了一个解决方案here

如果你看一下sencha docs，你可以看到：

  

要应用于tpl以更新内容区域的初始数据集   组件。

如此绑定数据，动态值无法正常工作。