将所选记录加载到模态窗口

时间:2015-09-29 13:53:21

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

我有grid data。 当我选择row并点击'编辑' button上的tbar,我希望使用window中的数据查看form(包括selected row)。 小提琴:https://fiddle.sencha.com/#fiddle/ukp

但我不知道如何访问当前selected row或如何将datacontroller传递到另一个GridController - > { {1}})。

提前致谢!

2 个答案:

答案 0 :(得分:4)

虽然这个问题已得到解答,但我认为可以通过两种方式做到不同(也更清晰)。

首先是CD使用的方式,这是一个伟大的anwser,但更清洁,没有任何逻辑在你的controller。让viewmodel完成他的工作:

bind属性设置为selection上的grid

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

第二种方式,我使用了很多,deep binding就是viewmodel。这是为了跟踪所选的record,无论其改变的是什么或任何地方。这可以通过binddeep: 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);
        }
    }
}

答案 1 :(得分:3)

您可以将记录传递到窗口视图 在Extjs 6中,您可以使用viewModelbind字段,例如:

// 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