javascript - Ext JS - 如何在新窗口中从网格填充文本字段

Question

因为我是 Ext JS 和 Sencha Architect 的新手，所以我在这里很挣扎 :(

我有一个网格，其中显示了两列 ID 和 Name，如下所示

ID    |    Name
1000       CA
1001       TX
1002       VA

有两个按钮添加和更新。

网格代码如下:

            items: [
                {
                    xtype: 'panel',
                    scrollable: true,
                    title: 'Plant',
                    dockedItems: [
                        {
                            xtype: 'gridpanel',
                            buttons: [
                                {
                                    text: 'Add Plant',
                                    handler: function() {  
                                                                                                                           });                                                   
                                    }
                                },
                                {
                                    text: 'Update Plant',
                                    handler: function() {
                                        Ext.create('XYZ.view.UpdatePlantWindow', {
                                                                 title: 'Update Plant'});}
                                }
                            ],
                            buttonAlign: 'center',
                            dock: 'top',
                            id: 'PlantGrid',
                            scrollable: true,
                            store: 'PlantStoreAdmin',
                            columns: [
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'ID_PLANT',
                                    text: 'Plant ID'
                                },
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'DS_PLANT',
                                    text: 'Plant Name',
                                    flex: 1
                                },

现在，当用户选择任何行并单击“更新”按钮时，将打开一个新窗口，其中有两个文本字段 ID 和名称。我想用用户在网格中选择的适当值填充这两个字段。

窗口代码:

Ext.define('XYZ.view.UpdatePlantWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.updateplantwindow',

    requires: [
        'Cepheid.view.UpdatePlantWindowViewModel',
        'Ext.container.Container',
        'Ext.form.field.Text'
    ],

    viewModel: {
        type: 'updateplantwindow'
    },
    autoShow: true,
    height: 250,
    width: 400,
    title: 'Update Plant',

    items: [
        {
            xtype: 'container'
        },
        {
            xtype: 'textfield',
            disabled: true,
            id: 'PlantIDUpdate',
            fieldLabel: 'Plant ID'
        },
        {
            xtype: 'textfield',
            fieldLabel: 'Label',
id: 'PlantNameUpdate'
            }           
        ]

    });

现在如何用适当的值填充两个文本字段？

提前致谢!

Answer 1

您可以使用 SelectionModel 获取网格中当前选定的记录。即:

var selection = myGrid.getSelectionModel().getSelection();

我建议将窗口中的字段包装在 form 中，因为这样您就可以使用 loadRecord 方法将选择值推送到 form 。

即。

myWindow.down('form').getForm().loadRecord(selection[0]);

否则，如果您不想在表单中换行，您可以在窗口中加载每个单独的值:

myWindow.down('#myField').setValue(selection[0].get('my_value'));

这是一个fiddle demonstrating a working example