brunoflmg
8 Nov 2012, 4:36 AM
Hello guys!
I am having difficulty in using the plugin associationrowexpander and associations of Extjs.
I implemented exactly as explained by Mitchell Simoens at: http://goo.gl/BB8i7. The grid I'm trying to produce is the second grid ... The demo can be seen at this link: http://goo.gl/xc8sV
I did everything right (at least I think so) as shown in the example of Mitchell. But to expand the line is displayed the following error:
TypeError: dataFn is undefined
This error occurs in the line 138 (see below) from the associationrowexpander plugin:
127 [...]
128 if (type === 'hasMany') {
129 var gridConfig = config.gridConfig,
130 viewConfig = config.viewConfig,
131 comp = gridConfig ? Ext.grid.Panel : Ext.view.View;
132
133 config = gridConfig ? gridConfig : viewConfig;
134
135 Ext.apply(config, {
136 recordId : id,
137 margin : 10,
138 store : dataFn.call(record) // trigger the following error:TypeError: dataFn is undefined
139 });
140
141 return new comp(config);
142 }
143 [...]
My server response was:
{
"data":[
{
"id":1,
"nome":"Bruno",
"cargo":null,
"observacoes":null,
"itemscontato":[
{
"id":1,
"tipocontato":"E-mail",
"valor":"brunoflmg@gmail.com"
},{
"id":2,
"tipocontato":"Telefone residencial",
"valor":"(31) 3333-3333"
}
]
}
],
"msg":"",
"success":true,
"total":1
}
This response above is the one contact (person) and the "itemscontato" is the contact items of this contact (eg. e-mail, phone, ...).
My Contato (contact) model:
Ext.define('App.model.Contato', {
idProperty: 'id',
extend: 'Ext.data.Model',
fields: [
{name: 'id'},
{name: 'pessoa'}, // my foreign key to table person (if I'm not using Doctrine in server side this column will named was pessoa_id)
{name: 'nome'},
{name: 'cargo'},
{name: 'observacoes'}
],
hasMany: {
model: 'Itemcontato',
name: 'itemscontato' // name of the node "itemscontato" in json above (I think this is my getter name)
}
});
My Itemcontato (contact item) model:
Ext.define('App.model.Itemcontato', {
idProperty: 'id',
extend: 'Ext.data.Model',
fields: [
{name: 'id'},
{name: 'contato'}, // my foreing key (like contato_id)
{name: 'tipocontato'},
{name: 'valor'}
],
belongsTo: {
model: 'Contato',
name: 'contatos',
foreignKey: 'contato'
},
hasOne: {
model: 'Contato',
name: 'contatos',
foreignKey: 'contato',
getterName: 'getContato'
}
});
My Grid:
Ext.define('App.view.contato.List',{
extend: 'Ext.ux.grid.abstract.GridSemToolbar',
store: Ext.create('App.store.Contatos'),
title: 'Lista de contatos',
alias: 'widget.contatolist',
itemId: 'gridContatos',
minHeight: 150,
plugins: [{
ptype: 'associationrowexpander',
getterName: 'itemscontato', // mesmo nome do nó contendo os itens de contato no json
viewConfig: {
itemSelector: 'div.row-text',
emptyText: 'Nenhum item de contato encontrado',
tpl: new Ext.XTemplate(
'<div><b>Items de contato:</b></div>',
'<tpl for=".">',
'<div style="margin-left: 72px" class="row-text">',
'<p><b>{tipocontato}:</b> {valor}<br>',
'<p><b>Observações:</b> {observacoes}</p>',
'</div>',
'</tpl>'
)
}
}],
initComponent: function(){
...
}
}
So when I run these codes I have the error "TypeError: dataFn is undefined".
What I'm doing wrong or failed to do?
I hope my English is understandable.
I am having difficulty in using the plugin associationrowexpander and associations of Extjs.
I implemented exactly as explained by Mitchell Simoens at: http://goo.gl/BB8i7. The grid I'm trying to produce is the second grid ... The demo can be seen at this link: http://goo.gl/xc8sV
I did everything right (at least I think so) as shown in the example of Mitchell. But to expand the line is displayed the following error:
TypeError: dataFn is undefined
This error occurs in the line 138 (see below) from the associationrowexpander plugin:
127 [...]
128 if (type === 'hasMany') {
129 var gridConfig = config.gridConfig,
130 viewConfig = config.viewConfig,
131 comp = gridConfig ? Ext.grid.Panel : Ext.view.View;
132
133 config = gridConfig ? gridConfig : viewConfig;
134
135 Ext.apply(config, {
136 recordId : id,
137 margin : 10,
138 store : dataFn.call(record) // trigger the following error:TypeError: dataFn is undefined
139 });
140
141 return new comp(config);
142 }
143 [...]
My server response was:
{
"data":[
{
"id":1,
"nome":"Bruno",
"cargo":null,
"observacoes":null,
"itemscontato":[
{
"id":1,
"tipocontato":"E-mail",
"valor":"brunoflmg@gmail.com"
},{
"id":2,
"tipocontato":"Telefone residencial",
"valor":"(31) 3333-3333"
}
]
}
],
"msg":"",
"success":true,
"total":1
}
This response above is the one contact (person) and the "itemscontato" is the contact items of this contact (eg. e-mail, phone, ...).
My Contato (contact) model:
Ext.define('App.model.Contato', {
idProperty: 'id',
extend: 'Ext.data.Model',
fields: [
{name: 'id'},
{name: 'pessoa'}, // my foreign key to table person (if I'm not using Doctrine in server side this column will named was pessoa_id)
{name: 'nome'},
{name: 'cargo'},
{name: 'observacoes'}
],
hasMany: {
model: 'Itemcontato',
name: 'itemscontato' // name of the node "itemscontato" in json above (I think this is my getter name)
}
});
My Itemcontato (contact item) model:
Ext.define('App.model.Itemcontato', {
idProperty: 'id',
extend: 'Ext.data.Model',
fields: [
{name: 'id'},
{name: 'contato'}, // my foreing key (like contato_id)
{name: 'tipocontato'},
{name: 'valor'}
],
belongsTo: {
model: 'Contato',
name: 'contatos',
foreignKey: 'contato'
},
hasOne: {
model: 'Contato',
name: 'contatos',
foreignKey: 'contato',
getterName: 'getContato'
}
});
My Grid:
Ext.define('App.view.contato.List',{
extend: 'Ext.ux.grid.abstract.GridSemToolbar',
store: Ext.create('App.store.Contatos'),
title: 'Lista de contatos',
alias: 'widget.contatolist',
itemId: 'gridContatos',
minHeight: 150,
plugins: [{
ptype: 'associationrowexpander',
getterName: 'itemscontato', // mesmo nome do nó contendo os itens de contato no json
viewConfig: {
itemSelector: 'div.row-text',
emptyText: 'Nenhum item de contato encontrado',
tpl: new Ext.XTemplate(
'<div><b>Items de contato:</b></div>',
'<tpl for=".">',
'<div style="margin-left: 72px" class="row-text">',
'<p><b>{tipocontato}:</b> {valor}<br>',
'<p><b>Observações:</b> {observacoes}</p>',
'</div>',
'</tpl>'
)
}
}],
initComponent: function(){
...
}
}
So when I run these codes I have the error "TypeError: dataFn is undefined".
What I'm doing wrong or failed to do?
I hope my English is understandable.