extjs - 如何在extjs4 grid selectionchange事件中获取具有hasMany关系的子项数据

Question

我有一个模型存储空间:

Ext.define('App.Supplier.Store', {
    extend : 'Ext.data.Store',
    constructor : function(config) {

        Ext.regModel('Supplier', {
            fields: [
                 {name: 'id', type: 'int'},
                 {name: 'name', type: 'string'},
                 {name: 'irn', type: 'string'}
            ],
            hasMany  : {model: 'SupplierContact', name: 'contacts', associationKey: 'contacts'}
        });

        Ext.regModel('SupplierContact', {
            fields: [
                 {name: 'id', type: 'int'},
                 {name: 'email', type: 'string'},
                 {name: 'phone', type: 'string'},
                 {name: 'name', type: 'string'}
            ],
            belongsTo: 'Supplier'
        });

        config = config || {};

        config.model = 'Supplier';
        config.proxy = {
            type : 'ajax',
            url : '/supplier/search/process',
            reader : {
                type : 'json',
                root : 'data',
                totalProperty : 'totalCount',
                successProperty: 'success'
            }
        };

        config.pageSize = 10;
        config.remoteSort = true;
        config.simpleSortMode = true;

        // call the superclass's constructor
        App.Supplier.Store.superclass.constructor.call(this, config);
    }
});

我有一个来自 url 的有效 json，这段代码工作正常:

 var store = new App.Supplier.Store({storeId: 'supplierStore'});
        store.load({
            callback: function() {
                var supplier = store.first();
                console.log("Order ID: " + supplier.getId() + ", which contains items:");
                supplier.contacts().each(function(contact) {
                    alert(contact.data.phone);

                });
            }
        });

我的网格:

Ext.define('App.Supplier.Grid', {
    extend : 'Ext.grid.GridPanel',
    alias : 'widget.supplierGrid',
    cls : 'supplier-grid',
    iconCls: 'icon-grid',
    collapsible: true,
    animCollapse: false,
    title: 'Expander Rows in a Collapsible Grid',
    height: 300,
    buttonAlign:'center',
    headers : [
               {text : 'Id', dataIndex : 'id', width : 20},
               {text : 'Name', dataIndex : 'name', flex : 4 },
               {text : 'IRN', dataIndex : 'irn', flex : 3}
              ],

    initComponent : function() {
        this.store = new App.Supplier.Store({storeId: 'supplierStore'});
        this.store.load();
        this.callParent(arguments);
        this.on('selectionchange', this.onRowSelect, this);
    },
    onRowSelect: function(sm, rs) {
        if (rs.length) {
            alert(sm.contacts); // undefined
            alert(rm.contacts); // undefined
            var info = this.getComponent('infoPanel');
            info.updateDetail(rs[0].data);
        }
    }

});

如何在 onRowSelect 中获取选定行的联系人？

PS: 来自服务器的 json:

{"totalCount":100,
"success":true,
"data":[{
    "id":2,
    "name":"department 0",
    "irn":"123490345907346123-0",
    "contacts":[{
            "id":3,
        "phone":"+7907 123 12 23",
        "email":"test@localhost",
        "name":"hh"
    }, {
        "id":4,
        "phone":"+7832 123 12 23",
        "email":"test2@localhost",
        "name":"gtftyf"
    }]
}]}

Answer 1

你能提供你的json吗？我认为您的 json 不正确，因此 ExtJS 也会加载关系。为了也加载关系，您还需要在返回的 json 中提供联系人详细信息。

你应该有这样的东西:

sucess: true,
totalCount: 10,
data: [{    
    id: 142,
    name: 'xyz',
    irn: 'test',
    contacts: [{
        id: 130,
        email: 'xyz@site.com',
        phone: 123445,
        name: 'Supplier XYZ'
    },{
        id: 131,
        email: 'test@site.com',
        phone: 123445,
        name: 'Supplier XYZ'
    }]      
}, ...
]

更新:

Json是对的!问题在于您访问数据的方式。如果您查看 selectionchange 事件的签名，您会注意到第一个是 DataView，第二个是所选记录的数组。因此，在您的情况下，rs 是所选行的数组。您应该能够以 rs[0].contacts 的形式访问它。

访问所选记录的另一种方法是使用 DataView 对象。您可以使用 getSelectedRecords 方法获取所选记录的数组。