I am working on implementing lazy loading of tree branches in an MVC application using extjs4.1. The branches are located on different URLs and I have faced several challenges along the way. Unfortunately, at this point, the branching functionality is not working as expected.
Here is where I am encountering issues:
Ext.define('OI.view.tree.Tree' ,{
extend: 'Ext.tree.Panel',
alias : 'widget.treepanel',
store: 'TreeStore',
collapsible: true,
rootVisible: false,
viewConfig: {
plugins: [{
ptype: 'treeviewdragdrop'
}]
},
height: 350,
width: 400,
title: 'Directory Listing',
initComponent: function() {
this.store = Ext.data.StoreManager.lookup(this.store);
this.store.getProxy().url = 'data/level1.json'; // <-- initialization loading
this.store.load();
this.callParent(arguments);
},
listeners: {
itemclick: function(view, record) {
console.info('ID: '+record.get('id'));
console.info('TEXT: '+record.get('text'));
console.info('PrimType: '+record.get('primaryType'));
console.info(record.fields.getCount());
console.info('JCRPATH: '+record.get('jcrPath'));
var newBranchStore = Ext.create('Ext.data.TreeStore', {
model: 'OI.model.Branch',
autoLoad: true,
proxy: {
type: 'ajax',
reader: {
url: 'data/'+ record.get('jcrPath') +'/level1.json', //<-- load json at the level of the URL path returned by the model
type: 'json'
}
},
folderSort: false
});
newBranchStore.load({url: 'data/'+ record.get('jcrPath') +'/level1.json',
callback: function(){
console.log('loaded');
var mynode = newBranchStore.getNodeById('content_mytest');
console.info(mynode.get('id'));
this.store.getNodeById(record.get('id')).appendChild(mynode).expand(); // <-- this does not work
},
scope: this
});
}
}
});
The initial level loads correctly, but when I click on a node, the correct JSON data is retrieved from the server (in this case, a static JSON file for debugging purposes). I then attempt to fetch a node statically and append it to the clicked node, however, this action is not successful.
My ultimate goal is to append all children obtained from the JSON file to the clicked node.
Furthermore, I am a bit uncertain about TreeStores... Am I right in assuming that only ONE TreeStore can be associated with one tree? Therefore, I need to add the new nodes to the original TreeStore... I could use some guidance and clarification on this matter.