Ext JS - 根據第一個網格中的行選擇在第二個網格中加載值

Question

我有2個網格...在第一個網格中，我顯示了一些細節，但第二個網格將爲空。當我在第一個網格中選擇任何一行時，第二個網格必須根據第一個網格中的行值顯示值。

爲1格，

Ext.define('Admin.view.report004.Dashboard400', 
{ 
    alias: 'widget.report004.list400', 
    itemId: 'dashboard400', 

    title : 'Summary By Bank', 
    stripeRows: true, 
    border: true, 
    loadMask: { 
     msg: 'Please wait..' 
    }, 
    extend: 'Ext.grid.GridPanel', 

    layout : 'fit',  
    bodyPadding: 10, 
    title: bundles.getLocalizedString('summary_by'), 
    store: report004Store, 
    features: [{ 
     ftype: 'summary' 
    }], 
    columns: [ 

     {id: 'report004CustomerName', header: bundles.getLocalizedString('customer_name'), 
      width: 150, sortable: false, hidden: false, 
      dataIndex: 'customerName', 
      align:'left', 
      summaryRenderer: function(value, summaryData, dataIndex) { 
       return '<b>Totals</b>'; 
      } 
     }, 
     {id: 'report004Count', header: bundles.getLocalizedString('count'), 
      width: 150, sortable: false, hidden: false, 
      dataIndex: 'count', 
      align:'left' 
     }, 

    ] 
}); 

對於電網2，

Ext.define('Admin.view.report004.Dashboard401', 
{ 
    alias: 'widget.report004.list100', 
    itemId: 'dashboard401', 

    title : 'By Specific Dataset', 
    stripeRows: true, 
    border: true, 
    loadMask: { 
     msg: 'Please wait..' 
    }, 
    extend: 'Ext.grid.GridPanel', 
    layout : 'fit', 
    bodyPadding: 10, 

    title: bundles.getLocalizedString('xxx'), 
    store: dashboard_401, 
    features: [{ 
     ftype: 'summary' 
    }], 
    columns: [ 
     { 
      id: 'name2', header: bundles.getLocalizedString('name'), 
      width: 200, sortable: false, hidden: false, 
      dataIndex: 'name', 
      summaryRenderer: function(value, summaryData, dataIndex) { 
       return '<b>Totals</b>'; 
      }     
     }, 
     {id: 'companyPaidCount2', header: bundles.getLocalizedString('paid_count'), 
      width: 150, sortable: false, hidden: false, 
      dataIndex: 'companyPaidCount',xtype: 'numbercolumn', format : '0,000', 
      align:'right', 
      summaryType: 'sum', 
      summaryRenderer: function(value, summaryData, dataIndex){ 
       return "<b>" + value + "</b>"; 

      } 

    ] 
}); 

請幫我在這..

Answer 1

使用select監聽 你的第一個網格。 grid select listener

Ext.define('Admin.view.report004.Dashboard400', { 
    alias: 'widget.report004.list400', 
    itemId: 'dashboard400', 

    title: 'Summary By Bank', 
    stripeRows: true, 
    border: true, 
    loadMask: { 
     msg: 'Please wait..' 
    }, 
    extend: 'Ext.grid.GridPanel', 

    layout: 'fit', 
    bodyPadding: 10, 
    title: bundles.getLocalizedString('summary_by'), 
    store: report004Store, 
    features: [{ 
     ftype: 'summary' 
    }], 
    listeners: { 
     select: function(grid, record, index) { 
      Ext.Ajax.request({ 
       url: 'page.php', 
       params: { 
        id: record.get("id") 
       }, 
       success: function(response) { 
        var data = Ext.decode(response.responseText); 
        dashboard_401.loadData(data); 
       } 
      }); 
     } 
    }, 
    columns: [ 

     { 
      id: 'report004CustomerName', 
      header: bundles.getLocalizedString('customer_name'), 
      width: 150, 
      sortable: false, 
      hidden: false, 
      dataIndex: 'customerName', 
      align: 'left', 
      summaryRenderer: function(value, summaryData, dataIndex) { 
       return '<b>Totals</b>'; 
      } 
     }, { 
      id: 'report004Count', 
      header: bundles.getLocalizedString('count'), 
      width: 150, 
      sortable: false, 
      hidden: false, 
      dataIndex: 'count', 
      align: 'left' 
     }, 

    ] 
});