Howto obtain child item data with hasMany relation in extjs4 grid selectionchange event

I have a storage with models:

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 =开发者_如何学JAVA 10;
        config.remoteSort = true;
        config.simpleSortMode = true;

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

I have a valid json from url and this code works fine:

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

                });
            }
        });

My grid:

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);
        }
    }

});

How to get contacts in onRowSelect for selected row ?

PS: json from server:

{"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"
    }]
}]}

Can you provide your json as well? I think your json is not correct so that, ExtJS loads the relationships as well. In order to load the relationships as well, you will need to provide the contacts details in the returned json as well..

You should have something like this:

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'
    }]      
}, ...
]

Update:

Json is correct! The problem lies with the way you access your data. If you look at the signature of selectionchange event, you will notice that the first is DataView and second is an array of selected records. So, in your case the rs is an array of the selected rows. You should be able to access it as rs[0].contacts.

Another way to access the selected records will be to use the DataView object. You can use the getSelectedRecords method to get the array of the selected records.