Extjs 5 MVC 中的 master/slave 面板

Question

我正在使用由面向 MVC 的代码风格提供支持的 Extjs5.1。
我有一个主视图，它继承自 Ext.panel.Panel，带有边框布局。

在东部地区，有一个网格，其中有一个商店包含几条记录（或"models"，我真的不知道我应该在这里使用什么术语）。 ("master grid")
在中心区域，还有一个继承自 Ext.form.Panel 的视图，它应该显示网格的选定项目。 ("slave form")

我的目标是用 "master grid" 的选定记录刷新 "slave form"。

我发现在网格和表单之间 "communicate" 的唯一方法是从主视图控制器执行一个 fireEvent('selectRecord', ...) 并在表单视图控制器，但它看起来很奇怪，因为表单视图是主视图的子项。

有更通用的方法吗？

由此推论，直接调用另一个视图的视图调用函数是一种很好的做法，还是我应该只让它们各自的控制器交互？

Answer 1

我通常做的，我认为这是最常见的方法，有一个 selectionchange 事件侦听器，它会像这样更新您的表单：

listeners : {
    selectionchange: function(model, records) {
        var rec = records[0];
        if (rec) {
            formpanel.getForm().loadRecord(rec);
        }
    }
}

为此，表单字段的 name 属性必须与网格存储模型中的字段名称相匹配。

这里有一个例子：http://dev.sencha.com/extjs/5.1.0/examples/kitchensink/#form-grid

Extjs 5 MVC 中的 master/slave 面板

A master/slave panel in Extjs 5 MVC

forms

extjs

model-view-controller

master-slave