Question

由于我是Ext JS和Sencha Architect的新手，我在这里苦苦挣扎:(

我有一个网格，显示两列ID和名称如下

ID    |    Name
1000       CA
1001       TX
1002       VA

有两个按钮Add＆amp;更新

网格代码如下：

            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和名称。我想使用用户在网格中选择的适当值填充这两个字段。

Windows代码：

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

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

1 个答案: