hasMany fields model display on extjs grid

Question

I have 2 ExtJS model, called modelBase and modelChild. I have configured "hasMany" modelChild to the modelBase.

Ext.define('app.model.modelBase', {
    extend: 'Ext.data.Model',

    requires: [
        'Ext.data.field.String'
    ],
    uses: [
        'app.model.modelChild'
    ],

    fields: [{
        name: 'post_code'
    }, {
        name: 'building_name'
    }],

    hasMany: {
        associatedName: 'cabinet',
        model: 'app.model.modelChild',
        associationKey: 'cabinet'
    }
});

This is the modelChild

Ext.define('app.model.modelChild', {
    extend: 'Ext.data.Model',

    requires: [
        'Ext.data.field.Field'
    ],

    belongsTo: 'app.model.modelBase',

    fields: [{
        name: 'operator'
    }]
});

My question is how to display the modelChild fields (operator) in the ExtJS grid? I will have more than 1 records using the modelChild. I want to use the "rowwidget" in the ExtjS grid's plugin, but couldn't configure to display the operator (from modelChild)

I am currently using ExtJS 7.1

The question really is how do YOU want these values to display? It sounds like you're wanting to maybe use a grid within a grid? If so, could you maybe attach a Fiddle of what you're trying to do or maybe a picture of what you're trying to accomplish? — incutonez

Dinkheller Dinkheller · Accepted Answer · 2020-09-23T09:59:14

You have to use a renderer to display hasOne or hasMany associations

columns: [{
    dataIndex: 'notWorkingForHasOne',
    text: 'Type',
    flex: 1,
    // dataIndex is not working
    renderer: 'renderType'
}]

and inside the viewController

// for hasOne userDetail
renderType: function (dataIndex, cell, record) {
    return record.getUserDetails().get('type');
},

// for hasMany publications
renderPublicationsFirstName: function (dataIndex, cell, record) {
    return record.publications().first().get('name');
},

hasMany fields model display on extjs grid

1 Answers