extjs中两个模型数据的belongsTo关系无法在网格面板上显示

Question

我在前端使用 extJS，在后端使用 yii。我有两个模型作为 Abodeinstitute，AbodeInstituteContact。 AbodeInstituteContact 是一个模型，它具有“instituteId”作为 Abodeinstitute 表的外键，我想在具有 belongsTo 关系的网格上显示 Abodeinstitute 表的“instituteName”字段。我该怎么做？

提前谢谢...

//这是查看代码
这里institutionNames是模型中使用的关联名称

   Ext.define('Balaee.view.abode.abodeinstitutecontact.AbodeInstituteContact',{
            extend:'Ext.grid.Panel',

            alias:'widget.abodeContactData',
            autoShow:true,
            store:'abode.abodeinstitutecontactStore',

            initComponent:function()
                {
                    this.columns=[
                                  {header:'ContactId', dataIndex:'contactId', flex:1},
                                  {header:'InstituteName', dataIndex:'instituteName', flex:1,

                                         renderer:function(val,data,record){
                                              var data='';
                                              record.instituteNames().each(function(Record){
                                                  data = data + Record.get('instituteName');
                                              });
                                              return data;
                                          }
                                     },
                                  {header:'InstituteId', dataIndex:'instituteId', flex:1},
                                  {header:'FirstName', dataIndex:'firstName', flex:1},
                                  {header:'MiddleName', dataIndex:'middleName', flex:1},
                                  {header:'LastName', dataIndex:'lastName', flex:1},

                                  {header:'ContactNo', dataIndex:'contactNo', flex:1},
                                  {header:'Email', dataIndex:'email', flex:1},
                                  {header:'DesignationId', dataIndex:'designationId', flex:1}
                             ],
                     this.callParent(arguments);
                }
        });

//型号代码...

AbodeInstitute 模型具有主键“instituteId”。

Ext.define('Balaee.model.abode.abodeinstituteModel',{
      extend: 'Ext.data.Model',
      idProperty:'instituteId',
      fields: ['instituteId','instituteName','instituteCategoryId'],

        associations:[
            {type:'HasMany',    model:'Balaee.model.abode.abodeinstitutecontactModel', foreignKey:'instituteId'}
        ],
});

AbodeInstituteContact 'instituteId' 是外键。

    Ext.define('Balaee.model.abode.abodeinstitutecontactModel',{
        extend: 'Ext.data.Model',
        idProperty:'contactId',
        fields: ['contactId','instituteId','firstName','middleName','lastName','contactNo','email','designationId'],
     associations:[
        {type:'BelongsTo',  model:'Balaee.model.abode.abodeinstituteModel',
         name:'instituteNames'}],
     proxy:
        {
            type:'ajax',
            api:
            {
                read:
                create:
                update:
                destroy:
            },//End of api 
            reader:
            {
                type:'json',
                root:'abodeContactData',
                successProperty:true,
            },//End of reader
        }//End of proxy
    });

//json代码

{
        "abodeContactData": [
            {
                "contactId": "4",
                "instituteId": "1",
                "instituteNames": [
                    {
                        "instituteName": "Balaee Pvt.LLP"
                    }
                ],
                "firstName": "Puja",
                "middleName": "Suresh",
                "lastName": "More",
                "contactNo": "32122323",
                "email": "puja@yahoo.com",
                "designationId": "3"
            },
            {
                "contactId": "6",
                "instituteId": "7",
                "instituteNames": [
                    {
                        "instituteName": "Soft"
                    }
                ],
                "firstName": "Riya",
                "middleName": "Ganesh",
                "lastName": "Mahajan",
                "contactNo": "23435",
                "email": "riya@gmail.com",
                "designationId": "2"
            },
            {
                "contactId": "12",
                "instituteId": "8",
                "instituteNames": [
                    {
                        "instituteName": "MST"
                    }
                ],
                "firstName": "Purva",
                "middleName": "Madhav",
                "lastName": "Patil",
                "contactNo": "98653210",
                "email": "purva@gmail.com",
                "designationId": "3"
            }
        ]
    }

Answer 1

您的数据是倒退的。你需要让你的主模型 hasMany 指向你的 Balaee.model.abode.abodeinstituteModel。此外，我清理了您的渲染器，因为这更合适，并且会在该列的网格中为您提供一个逗号分隔的列表。

Ext.define('Balaee.model.abode.abodeinstituteModel',{
    extend: 'Ext.data.Model',
    idProperty:'instituteId',
    fields: ['instituteId','instituteName','instituteCategoryId'],
    belongsTo: 'Balaee.model.abode.abodeinstitutecontactModel'
});

Ext.define('Balaee.model.abode.abodeinstitutecontactModel',{
    extend: 'Ext.data.Model',
    idProperty:'contactId',
    fields: ['contactId','instituteId','firstName','middleName',
             'lastName','contactNo','email','designationId'],
    hasMany: [ 
        { model: 'Balaee.model.abode.abodeinstituteModel', 
          name: 'instituteNames', associationKey: 'instituteNames'}
    ],
    proxy: {
        type:'ajax',
        url: '/yoururl',
        reader: {
            type:'json',
            root:'abodeContactData'
        }
    }
});

Ext.define('Balaee.view.abode.abodeinstitutecontact.AbodeInstituteContact',{
    extend:'Ext.grid.Panel',
    id: 'grid',
    alias:'widget.abodeContactData',
    autoShow:true,
    store: Ext.create('Balaee.store.abode.abodeinstitutecontactStore'),
    initComponent: function() {
        this.columns=[
            {header:'ContactId', dataIndex:'contactId', flex:1},
            {header:'InstituteName', dataIndex:'instituteName', flex:1,
                renderer:function(val,data,record){
                    var names = [];
                    record.instituteNames().each(function(Record){
                        names.push(Record.get('instituteName'));
                    });
                    return Ext.isEmpty(names) == false ? names.join(', ') : '';
                }
            },
            {header:'InstituteId', dataIndex:'instituteId', flex:1},
            {header:'FirstName', dataIndex:'firstName', flex:1},
            {header:'MiddleName', dataIndex:'middleName', flex:1},
            {header:'LastName', dataIndex:'lastName', flex:1},
            {header:'ContactNo', dataIndex:'contactNo', flex:1},
            {header:'Email', dataIndex:'email', flex:1},
            {header:'DesignationId', dataIndex:'designationId', flex:1}
         ],
         this.callParent(arguments);
    }
});