Ext JS - How to populate textfields from a grid in a new window

Question

As I am a newbie to Ext JS and Sencha Architect, I am a but struggling here :(

I have one grid whihc shows two columns ID and Name as follow

ID    |    Name
1000       CA
1001       TX
1002       VA

There are two buttons Add & Update.

Code of the grid is as follow:

            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
                                },

Now when user selects any row and clicks on Update Button, new window opens which has two text fields ID and Name. I want to populate these two fields with appropriate values that user has selected in the grid.

Code of 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'
            }           
        ]

    });

Now how do I populate both the text fields with appropriate values?

Thanks in advance !

Answer 1

You can use the SelectionModel to get the currently selected record(s) in the grid. ie:

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

And i'd recommend wrapping the fields in your window in a form because then you could use the loadRecord method to push the selection values to the form.

ie.

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

otherwise, if you don't want to wrap in the form you could load each individual value on the window:

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

Here is a fiddle demonstrating a working example