グリッド（ポップアップ）からextjsのフォームパネルに値を送信する方法

Question

グリッドビューでポップアップしたデータの1つをクリックした後にフォームパネルにデータを表示する方法、別の方法を試してみましたが、常に間違っています これは私ですグリッドパネル：

var tt = Ext.define('Rendering.view.beli.dataSupplier', { 
extend: 'Ext.form.Panel', 
//extend: 'Ext.window.Window', 
// xtype: 'beligrid', 

alias : 'widget.contatoform', 

frame: true, 
// id: 'detailPanelis', 
title: 'Company data', 
bodyPadding: 5, 
layout: 'column', 
requires: [ 
    'Ext.grid.*', 
    'Ext.form.*', 
    'Ext.layout.container.Column' 
], 

initComponent: function() { 
    this.items = [ 
     { 
      columnWidth: 0.65, 
      xtype: 'gridpanel', 
      reference: 'customerGrid', 
      store: 'BeliStore', 
      columns : [{ 
       text: 'Nama', 
       dataIndex: 'namaSupplier', 
       flex: 1 

      }, { 
       text: 'Alamat', 
       dataIndex: 'address', 
       flex: 1 

      }], 
      listeners: { 


       scope: this, 
       selectionchange: 'onSelectionChanges' 
      } 


     }]; 
    //]; 
    // }); 
    this.callParent(arguments); 
}, 

onSelectionChanges: function(model, records) { 
     //alert('yuhuuuu'); 
    var editt = Ext.create('Rendering.view.beli.bg_beli'); 

    var c = editt.onSelectionChange(model, records); 

} 

}); 

機能パネルを形成するために、データを送信するためには、

listeners: { 
       scope: this, 
       selectionchange: 'onSelectionChanges' 
      } 

これはonSelectionChangesの関数である：

onSelectionChanges: function(model, records) { 
     //alert('yuhuuuu'); 
    var editt = Ext.create('Rendering.view.beli.bg_beli'); 

    var c = editt.onSelectionChange(model, records); 

    } 

とフォームパネル：

var tt = Ext.define('Rendering.view.beli.bg_beli', { 
extend: 'Ext.form.Panel', 

xtype: 'beligrid', 

controller: 'binding-dynamic', 
frame: true, 

title: 'Company data', 
bodyPadding: 5, 
layout: 'column', 



requires: [ 
    'Ext.grid.*', 
    'Ext.form.*', 
    'Ext.layout.container.Column' 
], 

// In this example, configuration is applied at initComponent time 
// because it depends on profileInfo object that is generated for the 
// FormGrid instance. 
initComponent: function() { 
    //Ext.apply(this, { 


    this.items = [ 
     { 
      columnWidth: 0.65, 
      xtype: 'gridpanel', 

      store: 'BeliStore', 
      columns : [{ 
       text: 'Nama', 
       dataIndex: 'namaSupplier', 
       flex: 1 

      }, { 
       text: 'Alamat', 
       dataIndex: 'address', 
       flex: 1 

      }], 
      listeners: { 

       scope: this, 
       selectionchange: 'onSelectionChange' 
      } 


     },{ 
      columnWidth: 0.35, 
      margin: '20 0 0 10', 
      xtype: 'form', 
      title:'Company detailsss', 
      layout: 'anchor', 

      defaultType: 'textfield', 
      items: [ 
      { 

       name : 'id_supplier', 
       fieldLabel: 'id', 
       hidden:true 
      },{ 
       fieldLabel: 'Nama Supplier', 
       name: 'namaSupplier' 

      },{ 
        fieldLabel: 'email', 
        name: 'email' 

      },{ 
        fieldLabel: 'alamat', 
        name: 'address' 

      },{ 
       xtype: 'button', 
       text: 'YUY', 
       action: 'add' 
      }] 

     }]; 
    //]; 
    // }); 
    this.callParent(arguments); 
}, 

onSelectionChange: function(model, records) { 

    alert('asdasd'); 


    console.log(records); 
    var rec = records[0]; 
    console.log(rec); 
    if (rec) { 
     var c = this.getForm().loadRecord(rec); 
    // this.getBeliStoreStore().load(); 
     console.log(this.getForm().loadRecord(rec)); 
    } 
} 

}); 

私は、パネルを形成するためにグリッドからデータを送信し、フォームのパネルでデータを受け入れた機能は次のとおりです。

onSelectionChange: function(model, records) { 

    alert('asdasd'); 


    console.log(records); 
    var rec = records[0]; 
    console.log(rec); 
    if (rec) { 
     var c = this.getForm().loadRecord(rec); 
    // this.getBeliStoreStore().load(); 
     console.log(this.getForm().loadRecord(rec)); 
    } 
} 

助けてください、私はすべての参照を探していますまだ回答がありません。

Answer 1

私の提案はthis.onSelectionChangeというイベントの呼び出しを変更しています。これはthis.on（ 'selectionchange'、this.onSelectionChange）のようにextjsの呼び出しイベントの別の方法です

initComponent: function() { 

    var me = this ; 

    this.items = [ 
     { 
      columnWidth: 0.65, 
      xtype: 'gridpanel', 
      reference: 'customerGrid', 
      store: 'BeliStore', 
      columns : [{ 
       text: 'Nama', 
       dataIndex: 'namaSupplier', 
       flex: 1 

      }, { 
       text: 'Alamat', 
       dataIndex: 'address', 
       flex: 1 

      }], 
      listeners: {  
       scope: this, 
       selectionchange: me.onSelectionChanges 
      } 


     }]; 
    //]; 
    // }); 
    this.callParent(arguments); 
} 

OR 

initComponent: function() { 
    var me = this ; 

    var grid = Ext.create('Ext.grid.Panel', { 
        reference: 'customerGrid', 
        store: 'BeliStore', 
        columns : [{ 
         text: 'Nama', 
         dataIndex: 'namaSupplier', 
         flex: 1 

         }, { 
         text: 'Alamat', 
         dataIndex: 'address', 
         flex: 1 
        } 
        ]}); 

    me.items = [ 
     { 
      columnWidth: 0.65, 
      grid    

     }];  

    grid.on('selectionchange',me.onSelectionChange) 

    this.callParent(arguments); 
} 

http://docs.sencha.com/extjs/4.2.5/#!/example/build/KitchenSink/ext-theme-neptune/#form-grid