How to get child data with hasMany relation in extjs4 gridchangechange event

I have a repository 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 = 10;
        config.remoteSort = true;
        config.simpleSortMode = true;

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

I have the correct 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 the 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"
    }]
}]}