PDA

View Full Version : Grid with plugin associationrowexpander not working



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.

mitchellsimoens
10 Nov 2012, 6:10 AM
That means your association configs are not setup properly. I just updated the example to use 4.1.3 and they work without a hitch.

brunoflmg
12 Nov 2012, 3:26 AM
Thanks Mitchell!

I'll check it out!

naxito
12 Nov 2012, 5:17 AM
I had a similar problem, but with an XmlReader... my solution was to add the proxy config option to child model.

proxy: { type: 'memory', reader: { type: 'xml', rootProperty: 'lineas', record: 'linea'} }

i.stojanovic
16 May 2013, 2:42 PM
Hi,

In version 4.2 demo does not work properly.
colspan decreases and details narrows by one column to the right with each new main row

post withs same problem:
http://www.walkingtree.in/forums/showthread.php?1266-Extjs-4-2-Row-Expander-plugin-issue

Do you have a suggestion

i.stojanovic
17 May 2013, 2:04 AM
I found the solution
Here I will indicate the changes that need to be made in Ext-all and Ext-all-debug documents to rowexpander working.

The ext-all-debug line in 114752 is needed instead

rowValues.rowBodyColspan = rowValues.rowBodyColspan - 1;
put

rowValues.rowBodyColspan = rowValues.view.getGridColumns().length - 1;

The ext-all you need to find

{d.rowBodyColspan=d.rowBodyColspanh-1}
and replace with

{d.rowBodyColspan=d.view.getGridColumns().length-1}

Hopefully this will be fixed in the next version