Extjs 4.x : How can i pass the data from a grid to a pop up window?

Question

Can anyone help me ?

if i add a listener to a grid and use the record.get('dataIndex') it will return undefined ...

with this.getSelectionModel().getSelection()[0] i get the selected row, which i save in the parameter testsystem.

with the constructor of my pop up window i assign the row object to a new variable and try to get the data from the row.. but i didnt work :/

initcomponent: function { var config = {
         boddyPadding: 10,
         width: 1400,
         title: 'Testsystem',
         store: this.store,
         emptyText: 'Currently, no test system avaiable!',
         columns: [
                { header: 'System/Database', dataIndex: 'targetSystem', width: 130 },
                { header: 'Operating System', dataIndex: 'operatingSystem', width: 130 },
                { header: 'Version', dataIndex: 'version' },
                { header: 'Operating System Name', dataIndex: 'operatingSystemName', flex: 1 },
                { header: 'RAM', dataIndex: 'ram' },
                { header: 'Member Of', dataIndex: 'memberOf' },
                { header: 'Is Vm ?', dataIndex: 'isVM' },
                { header: 'MAC', dataIndex: 'mac' },
                { header: 'CPU Count', dataIndex: 'cpuCount' },
                { header: 'HDD', dataIndex: 'hdd' }
           ],
         selModel: new Ext.selection.RowModel({mode: 'SINGLE'}),
         forceFit: true,
         listener: {
           select: function(selModel, record, index, options){
                alert(record.get('targestSystem'));
           }
         },
         tbar: {
              items: [
                 { 
                      text: 'Refresh',
                      handler: function() {
                           this.store.reload();
                      },
                      scope: this
                   },
                 { xtype: 'tbseparator'},
                 { 
                      text: 'Edit',
                      handler: function(btn) {
                           new Inubit.Configuration.Edit({
                                testsystem: this.getSelectionModel().getSelection()[0],
                                modal: true,
                                listeners: {
                                     'close' : function() {
                                          this.store.reload();
                                     },
                                     scope: this
                                }
                           }).show(btn);
                      },
                      scope: this
                 }
              ]
          },

           dockedItems: [{
                xtype:'pagingtoolbar',
                store: this.store,
                dock: 'bottom',
                displayInfo: true,
                displayMsg: '{0} - {1} of {2}',
                emptyMsg: "No records to display",
            }]  
        }

and the pop up window :

Ext.define('Inubit.Configuration.Edit', {
extend: 'Ext.window.Window',
title: 'Edit',

constructor : function(config) {
 this.testsystem = config.testsystem,
 this.name = this.testsystem.get('TargetSystem');

 alert(this.name),

 Ext.apply(this, Ext.apply(this.initialConfig));
 Inubit.Configuration.Edit.superclass.initComponent.call(this);

} });

i am new to extjs and using 4.2

Answer 1

In your listener you need to simply populate the value which you want to show from the data of record. Here is sample code

listener: {
       select: function(selModel, record, index, options){
            alert(record.data.name);
       }
     }

In code example instead of name you can display the value which you wanted. I attach fiddler. Fiddle and here I am displaying name. You can not simpy display object. Please keep that in mind.

Answer 2

Use this:

listeners : {
    select: function(selModel, record, index, options){
        Ext.create('Ext.window.Window', {
            title: 'windowTitle',
            id: 'newTodoListWindow',
            minHeight: 230,
            minWidth: 230,
            layout: 'fit',
            closable: true,
            cls:'windowPad',
            closeAction: 'destroy',
            defaultFocus:'todoTitle',
            items: [
                    {
                        html:record.data.name
                    }
                ]
         }).show();

   }

Answer 3

i have a solution :

onEdit : function(grid) {
      var rows = this.getSelectionModel().getSelection();
      var row = rows[0];
      if (this.getSelectionModel().hasSelection()) {
           Ext.create('Ext.window.Window', {
                title: 'windowTitle',
                id: 'newTodoListWindow',
                minHeight: 230,
                minWidth: 230,
                layout: 'fit',
                closable: true,
                cls:'windowPad',
                closeAction: 'destroy',
                defaultFocus:'todoTitle',
                items: [
                { xtype: 'textfield',
                grow: false,
                width : 650,
                fieldLabel: 'System/Database',
                anchor: '100%',
                value : row.get('targetSystem')
                }]
             }).show();    

this show me the info in a new window that i needed, thanks all for helping ! :)