将所选记录加载到模式窗口答案

【问题标题】：Load selected record to modal window将所选记录加载到模式窗口
【发布时间】：2015-12-27 01:00:49
【问题描述】：

我有一个grid 和data。当我选择row 并点击tbar 上的“编辑”button 时，我想查看window（包括form）和selected row 中的数据。小提琴：https://fiddle.sencha.com/#fiddle/ukp

但我不知道如何访问当前的selected row 或如何将data 从一个controller 传递到另一个（GridController --> WindowController）。

提前致谢！

【问题讨论】：

标签： javascript extjs model-view-controller mvvm extjs6

【解决方案1】：

虽然这个问题得到了回答，但我认为可以通过两种方式以不同的方式（更简洁）完成。

首先是 CD 使用的方式，这是一个很棒的答案，但更简洁，在您的 controller 中没有任何逻辑。让viewmodel 完成他的工作：

将bind 属性配置为grid 上的selection：

bind: {
    selection: '{rec}'
},

字段保持不变：

items: [{
    xtype: 'textfield',
    fieldLabel: 'Firstname',
    bind: '{rec.firstName}'
}, {
    xtype: 'textfield',
    fieldLabel: 'Lastname',
    bind: '{rec.lastName}'
}]

就是这样。现在您可以删除窗口中的逻辑controller。

工作示例：https://fiddle.sencha.com/#fiddle/ulf

第二种方式，我经常使用这种方式，是在您的viewmodel 上使用deep binding。这是为了跟踪选择的record，无论它发生了什么变化或在哪里发生了变化。这可以通过bind 和deep: true 来完成。

在您的（单独的）viewmodel 中放置一个formula：

formulas: {
    rec: {
        // We need to bind deep to be notified on each model change
        bind: {
            bindTo: '{myGrid.selection}', //--> reference configurated on the grid view (reference: myGrid)
            deep: true
        },
        get: function(record) {
            return record;
        },
        set: function(record) {
            if(!record.isModel) {
                record = this.get('records').getById(record);
            }
            this.set('currentRecord', record);
        }
    }
}

【讨论】：

很好的答案！这看起来确实更好.. :-)
绑定选择对我不起作用。 @CD 的答案确实有效！我在 ExtJS 6.5.1

【解决方案2】：

您可以将记录传递到窗口视图。
在 Extjs 6 中，您可以使用 viewModel 和 bind 字段，例如：

// In The controller

var selectionModel = grid.getSelectionModel();

Ext.create({
    xtype: 'my-window',
    viewModel: {
        data: {
            rec: selectionModel.getSelection()[0]
        }
    }
});

// The window 

items: [{
    xtype: 'textfield',
    fieldLabel: 'Firstname',
    bind: '{rec.firstName}'
}, {
    xtype: 'textfield',
    fieldLabel: 'Lastname',
    bind: '{rec.lastName}'
}]

基于您的代码的工作示例：https://fiddle.sencha.com/#fiddle/ukr

【讨论】：

哇，这太棒了！非常感谢。