Tree Panel and fields mapping: Cannot read property 'internalId' of undefined

[MaciejZabielski]

Hi,

I'm just going crazy over this: I'm using Tree Panel, TreeStore and a model to load data like this:


[{
"data": "abc",
"metadata": {
"key1":"value",
"key2":"value"
},
"children": [{
"data": "abc",
"metadata": {
"key1":"value",
"key2":"value"
}
},{
"data": "abc",
"metadata": {
"key1":"value",
"key2":"value"
}
}]
}]


When I use the following config:


Ext.define('App.model.TreeItemModel', { extend: 'Ext.data.Model',
alias: 'model.tree',


fields: [
{
name: 'data',
mapping: 'data'
}
]
});

all works well, but only when I add mapping for nested data inside metadata object:


Ext.define('HyperDoc.model.TreeItemModel', {
extend: 'Ext.data.Model',
alias: 'model.tree',


idProperty: 'tslid',


fields: [
{
name: 'data',
mapping: 'data'
},
{
name: 'key',
mapping: 'metadata.key1'
}
]
});


My store is loaded with the data so that I can see both data and key in it, but as soon as the Tree Panel is bound to it, it will throw this error:
Uncaught TypeError: Cannot read property 'internalId' of undefined ext-all-debug-w-comments.js:121638


Uncaught TypeError: Cannot read property 'internalId' of undefined ext-all-debug-w-comments.js:121638
Ext.define.updateIndexes ext-all-debug-w-comments.js:121638
Ext.define.onAdd ext-all-debug-w-comments.js:121557
Base.implement.callParent ext-all-debug-w-comments.js:6194
Ext.define.onAdd ext-all-debug-w-comments.js:132935
fire ext-all-debug-w-comments.js:14134
Ext.define.continueFireEvent ext-all-debug-w-comments.js:14503
Ext.define.fireEvent ext-all-debug-w-comments.js:14474
Ext.define.insert ext-all-debug-w-comments.js:92815
Ext.define.onNodeExpand ext-all-debug-w-comments.js:97683
fire ext-all-debug-w-comments.js:14134
Ext.define.continueFireEvent ext-all-debug-w-comments.js:14503
Ext.define.fireEvent ext-all-debug-w-comments.js:14474
(anonymous function) ext-all-debug-w-comments.js:97426
Ext.apply.callback ext-all-debug-w-comments.js:10832
read.callback ext-all-debug-w-comments.js:98481
Ext.apply.callback ext-all-debug-w-comments.js:10832
Ext.define.onProxyLoad ext-all-debug-w-comments.js:98810
Ext.define.processResponse ext-all-debug-w-comments.js:90944
(anonymous function) ext-all-debug-w-comments.js:91423
Ext.apply.callback ext-all-debug-w-comments.js:10832
Ext.define.onComplete ext-all-debug-w-comments.js:35603
Ext.define.onStateChange ext-all-debug-w-comments.js:35541
(anonymous function)


What's wrong? Is it some bug, my mistake.... ?
Thanks for any help!

EDIT: I have used "convert" function to access other data and return it and that works fine.... but what is the mapping for then? In the API Docs, if I understand it well, you can sepcify path like "object.property"

[vietits]

FYI: The following example works fine on Ext 4.1.1 and Chrome.
One thing to mention is you define 'tslid' as idProperty but there is no tslid field in your model definition.


Ext.onReady(function(){
Ext.define('HyperDoc.model.TreeItemModel', {
extend: 'Ext.data.Model',
alias: 'model.tree',
idProperty: 'tslid',
fields: [
{
name: 'data',
mapping: 'data'
},
{
name: 'key',
mapping: 'metadata.key1'
}
]
});


var store = Ext.create('Ext.data.TreeStore', {
model: 'HyperDoc.model.TreeItemModel',
root: {
data: 'Root'
},
proxy: {
type: 'ajax',
url: 'index.json'
}
});


Ext.create('Ext.tree.Panel', {
renderTo: Ext.getBody(),
width: 300,
height: 200,
store: store,
columns: [{
xtype: 'treecolumn',
dataIndex: 'data',
flex: 1
},{
dataIndex: 'key'
}]
});
});

index.json


[{
"data": "abc",
"metadata": {
"key1":"value",
"key2":"value"
},
"children": [{
"data": "abc",
"metadata": {
"key1":"value",
"key2":"value"
}
},{
"data": "abc",
"metadata": {
"key1":"value",
"key2":"value"
}
}]
}]