Ext JS - 根据第一个网格中的行选择在第二个网格中加载值

Posted 2023-02-26

【中文标题】Ext JS - 根据第一个网格中的行选择在第二个网格中加载值

【英文标题】：Ext JS - loading values in second grid based on row selection in first grid

【发布时间】：2016-02-27 05:18:42

【问题描述】：

我有 2 个网格...在第一个网格中，我展示了一些细节，但第二个网格将为空。当我在第一个网格中选择任何行时，第二个网格必须根据第一个网格中的行值显示值。

对于第一个网格，

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>";

             

     ]
 );

请帮我解决这个问题..

【参考方案1】：

使用选择监听器 为您的第一个网格。 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'
        ,

    ]
);