EXT JS: How to load selected grid row into window?

Question

User Form

Ext.define('Patients.view.Form',{
    extend: 'Ext.form.Panel',
    xtype: 'patients_form',
    title: 'Patient Info',

    defaultType: 'textfield',
    items: [{
        fieldLabel:'Name',
        name: 'name',
        allowBlank: false,
    },{
        fieldLabel: 'Age',
        name: 'age',
        allowBlank: false
    },{
        fieldLabel: 'Phone',
        name: 'phnumber',
        allowBlank: 'false'
    }],

    dockedItems: [{
        xtype:'toolbar',
        dock: 'bottom',
        items:[{
             iconCls: 'icon-user-add',
             text: 'Add',
             scope: this,
             itemId: 'addButton'

         },{
             iconCls: 'icon-reset',
             itemId:'resetButton',
             text: 'Reset',
             scope: this

         },{
             iconCls: 'icon-save',
             itemId: 'savebutton',
             text: 'Save',
             disabled: true,
             scope: this

       }]
  }]

 });

This is my grid which displays user input. On row double click a window launches but its empty. How do i display the information from the selected row in the grid in the window?

Ext.define('Patients.view.Grid',{
    extend: 'Ext.grid.Panel',
    store:'PatientsInfo',
    xtype: 'patients_grid',
    selType: 'rowmodel',

    listeners:{
        itemdblclick: function(record){
            var win = Ext.create("Ext.Window",{
                title: 'Patients Window',
                height: 160,
                width: 160, 

            })
            win.show();  

        }
    },

    columns: [{

        text: 'Name',
        sortable: true,
        resizable: false, 
        draggable: false,
        hideable: false,
        dataIndex: 'name'
    },{
        text: 'Age',
        sortable: true,
        resizable: false,
        draggable: false,
        hideable: false,
        dataIndex: 'age'
    },{
        text: 'Phone Number',
        sortable: false,
        resizable: false,
        draggable: false,
        hideable: false,
        dataIndex: 'phnumber'
    }]
});

Thanks in advance!

Answer 1

you need to add refs to window objects

items: [{
        fieldLabel:'Name',
        name: 'name',
        allowBlank: false,
        ref : '../name'
    },{
        fieldLabel: 'Age',
        name: 'age',
        allowBlank: false,
        ref : '../age'
    },{
        fieldLabel: 'Phone',
        name: 'phnumber',
        allowBlank: 'false',
        ref : '../phnumber'
    }],

and set data to them when you show window.

itemdblclick: function(record){
            var win = Ext.create("Ext.Window",{
                title: 'Patients Window',
                height: 160,
                width: 160, 

            })
            win.name = record.get('name');
            win.age = record.get('age');
            win.prohne = record.get('phone');
            win.show();  

        }

Answer 2

Add a form property to Grid as a reference to form, and also a showForm() function that when a user click on Add or dblClick on row's grid, you call it with id of selected row or null(when click add). showForm() checks the form reference, if it's null, create an instance of form and call this.form.loadFormData(id)

    Ext.define('Patients.view.Grid',{
    extend: 'Ext.grid.Panel',
    store:'PatientsInfo',
    xtype: 'patients_grid',
    selType: 'rowmodel',

    listeners:{
        itemdblclick: function(record){
            var win = Ext.create("Ext.Window",{
                title: 'Patients Window',
                height: 160,
                width: 160, 

            })
            win.show();  

        }
    },

form:null,
showForm:function(id){
         if(!form) this.form = new Patients.view.Form();
         this.form.loadFormData(id);
},
//columns:....

and in form in loadFormData() you make a decision depend on id. if it is null create an instance of Model and load it, else retrieve record(with all your desire fields) and load it.

Ext.define('Patients.view.Form',{
extend: 'Ext.form.Panel',
xtype: 'patients_form',
title: 'Patient Info',

defaultType: 'textfield',
items: [{
    fieldLabel:'Name',
    name: 'name',
    allowBlank: false,
},{
    fieldLabel: 'Age',
    name: 'age',
    allowBlank: false
},{
    fieldLabel: 'Phone',
    name: 'phnumber',
    allowBlank: 'false'
}],
    // docked items and else...

loadFormData:function(id){
 var me = this.
 if(!id){
  var record = new Patients.model.User();
  this.loadRecord(record);
 }
 else{
  var record  = Patients.model.User.load(id,{
              callback:function(record){  
                                me.loadRecord(record);
                                var win = Ext.view.Window({
                                  items:[me],
                                  });
                                 win.show();
                               }
             }

 }
}

Ext.data.Model.load() is static method.

Finally you create a window and add the form to it and call show()