Extjs4 belongsTo extjs中两个模型的关系数据无法显示在网格面板上
我使用extJS作为前端,yii作为后端。我有两个模型作为Abodeinstitute,AbodeInstituteContact。 AbodeInstituteContact是一个模型,它将'instituteId'作为Abodeinstitute表的外键,我想在网格上显示Abodeinstitute表的'instituteName'字段,并显示belongsTo关系。我怎么做 先谢谢你 //这是查看代码Extjs4 belongsTo extjs中两个模型的关系数据无法显示在网格面板上,extjs4,relationship,belongs-to,Extjs4,Relationship,Belongs To,我使用extJS作为前端,yii作为后端。我有两个模型作为Abodeinstitute,AbodeInstituteContact。 AbodeInstituteContact是一个模型,它将'instituteId'作为Abodeinstitute表的外键,我想在网格上显示Abodeinstitute表的'instituteName'字段,并显示belongsTo关系。我怎么做 先谢谢你 //这是查看代码 这里instituteNames是模型中使用的关联的名称 Ext.define('
这里instituteNames是模型中使用的关联的名称
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"
}
]
}
你的数据是反向的。您需要让您的主模型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);
}
});