将所选记录加载到模式 window

Question

我有一个 grid 和 data。当我select一个row并在tbar上点击'edit'button时，我想查看一个window（包括一个form) 与来自 selected row 的数据。 Fiddle: https://fiddle.sencha.com/#fiddle/ukp

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

提前致谢！

Answer 1

您可以将记录传递给 window 视图。
在 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

Answer 2

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

首先是 CD 使用的方式，这是一个很好的答案，但在您的 controller 中更清晰且没有任何逻辑。让 viewmodel 做他的工作：

将 bind 属性配置到 grid 上的 selection:

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

字段保持不变：

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

就是这样。现在您可以删除 window controller.

中的逻辑

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

第二种方法，我经常使用它，是 deep binding 在你的 viewmodel 上。这是为了跟踪所选择的 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);
        }
    }
}

将所选记录加载到模式 window

Load selected record to modal window

javascript

model-view-controller

extjs

mvvm

extjs6