Как получить данные дочернего элемента с отношением hasMany в событии выделения сетки extjs4

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

У меня есть действительный json из URL, и этот код работает нормально:

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

Обновление:

Джсон прав!Проблема заключается в способе доступа к вашим данным.Если вы посмотрите на сигнатуру события selectionchange, вы заметите, что первый - это DataView, а второй - массив выбранных записей.Итак, в вашем случае rs является массивом выбранных строк.Вы должны иметь возможность доступа к нему как rs[0].contacts.

Другим способом доступа к выбранным записям будет использование объекта DataView.Вы можете использовать метод getSelectedRecords, чтобы получить массив выбранных записей.