PDA

View Full Version : TreePanel with different models



1099511627776
17 Jan 2012, 11:00 PM
Hello guys,
Here is what I'm stuck with:
I have a treepanel that will be filled with nodes with different models
I've tried to do this like described in http://www.clintharris.net/2011/how-to-use-extjs-4-treepanels-with-both-static-data-and-model-stores/
Everithing works fine, until I've tried to expand the node.
After expanding I've got an error:


records[i] is undefined
ns[i].viewRecordId = records[i].internalId;

I've googled for a while and found this post:
http://stackoverflow.com/questions/6354906/recordsi-is-undefined-on-treepanel
It says, that a problem is with unique ID-s of the nodes.
I've managed to make ID of my nodes unique but this error is still there.
A brief code that probuces this error is:
root node:

Ext.define('ASV.view.opertree',{
extend:'Ext.tree.Panel',
alias: 'widget.opertree',
store: 'opertree',
model: 'opertree',
title: 'Operations',
constructor:function(){
this.callParent(arguments);
console.log('initComponent documents');
var documents = Ext.data.StoreManager.lookup('documents');
var dicts = Ext.data.StoreManager.lookup('dictionaries');
this.store.getRootNode().appendChild(documents.getRootNode()).expand();
this.store.getRootNode().appendChild(dicts.getRootNode()).expand();
}
});

dictionaries node store:

Ext.define('ASV.store.dictionaries',{
extend: 'Ext.data.TreeStore',
autoLoad:true,
model:'ASV.model.dictionaries',
root:{
expanded:true,
id:'dic-0'
},
......................
});

documents store:

Ext.define('ASV.store.documents',{
extend: 'Ext.data.TreeStore',
autoLoad:true,
model:'ASV.model.documents',
root:{
expanded:true,
id:'doc-0'
},
..................
});

models for dictionaries and documents are the same, and look like this:


Ext.define('ASV.model.dictionaries',{
extend: 'Ext.data.Model',
fields:[
{name: 'id',type:'string'},
{name: 'text', type:'string'},
{name: 'action', type:'string'},
{name: 'leaf', type:'bool'}
]
});


So, what am I missing?

mitchellsimoens
18 Jan 2012, 6:15 AM
What you are doing is not really using two models but taking nodes off a store and appending pre-made nodes onto the tree.

I would say set a breakpoint and see why records[i] is undefined.

1099511627776
18 Jan 2012, 9:27 AM
The problem occurs in updateIndexes
The records[i] is undefined because:


var ns = this.all.elements, records = this.store.getRange(),
i;

startIndex = startIndex || 0;
endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length - 1));
for(i = startIndex; i <= endIndex; i++){
ns[i].viewIndex = i;
ns[i].viewRecordId = records[i].internalId;
if (!ns[i].boundView) {
ns[i].boundView = this.id;
}
}


ns.length - has 9 records
and records[] - has only 6 records

May be you can suggest me how can I combine 2 stores in different child nodes of TreePanel

1099511627776
19 Jan 2012, 12:52 AM
The solution is simple:
I've forgotten that ExtJS is an asynchronous ramework, so i've appended the nodes that were empty and that time
A solution for my code is to replace:

Ext.define('ASV.view.opertree',{
extend:'Ext.tree.Panel',
alias: 'widget.opertree',
store: 'opertree',
model: 'opertree',
title: 'Operations',
constructor:function(){
this.callParent(arguments);
console.log('initComponent documents');
this.store.getRootNode().appendChild(documents.getRootNode());
this.store.getRootNode().appendChild(dicts.getRootNode());
}
});

with async code:


Ext.define('ASV.view.opertree',{
extend:'Ext.tree.Panel',
alias: 'widget.opertree',
store: 'opertree',
model: 'opertree',
title: 'Operations',
constructor:function(){
this.callParent(arguments);
console.log('initComponent documents');
var documents = Ext.data.StoreManager.lookup('documents');
var dicts = Ext.data.StoreManager.lookup('dictionaries');
documents.on('load',function(store,node,records){
this.store.getRootNode().appendChild(store.getRootNode());
},this);
dicts.on('load',function(store,node,records){
this.store.getRootNode().appendChild(store.getRootNode());
},this);
}
});

So far it works