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

时间:2016-02-27 05:18:43

标签: extjs extjs4 sencha-touch extjs4.1

我有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 个答案:

答案 0 :(得分:0)

使用select listener 为你的第一个网格。 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'
        },

    ]
});