View Full Version : Grid with plugin associationrowexpander not working

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;
133 config = gridConfig ? gridConfig : viewConfig;
135 Ext.apply(config, {
136 recordId : id,
137 margin : 10,
138 store : dataFn.call(record) // trigger the following error:TypeError: dataFn is undefined
139 });
141 return new comp(config);
142 }
143 [...]

My server response was:

"tipocontato":"Telefone residencial",
"valor":"(31) 3333-3333"

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:


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>',

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.

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.

12 Nov 2012, 3:26 AM
Thanks Mitchell!

I'll check it out!

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'} }

16 May 2013, 2:42 PM

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:

Do you have a suggestion

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;

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

The ext-all you need to find

and replace with


Hopefully this will be fixed in the next version