Лучшим решением для меня было:
- создать два хранилища дерева - одно со статическим содержимым, другое настроено для загрузки моих пользовательских моделей с сервера.
- «отобразить» динамически загружаемое дерево на статическое дерево.
Я написал небольшое руководство, которое включает в себя работающую демонстрацию здесь (на случай, если кто-то захочет получить более подробную информацию).ответ), но на высоком уровне код выглядит так:
Ext.define('demo.UserModel', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'profile_image_url']
});
var userTreeStore = Ext.create('Ext.data.TreeStore', {
model: 'demo.UserModel',
proxy: {
type: 'jsonp',
url : 'https://myserver/getusers',
reader: {
type: 'json',
root: 'users'
}
},
listeners: {
// Each demo.UserModel instance will be automatically
// decorated with methods/properties of Ext.data.NodeInterface
// (i.e., a "node"). Whenever a UserModel node is appended
// to the tree, this TreeStore will fire an "append" event.
append: function( thisNode, newChildNode, index, eOpts ) {
// If the node that's being appended isn't a root node, then we can
// assume it's one of our UserModel instances that's been "dressed
// up" as a node
if( !newChildNode.isRoot() ) {
newChildNode.set('leaf', true);
newChildNode.set('text', newChildNode.get('name'));
newChildNode.set('icon', newChildNode.get('profile_image_url'));
}
}
}
});
userTreeStore.setRootNode({
text: 'Users',
leaf: false,
expanded: false // If this were true, the store would load itself
// immediately; we do NOT want that to happen
});
var settingsTreeStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{
text: 'Settings',
leaf: false,
expanded: true,
children: [
{
text: 'System Settings',
leaf: true
},
{
text: 'Appearance',
leaf: true
}
]
}
]
}
});
// Graft our userTreeStore into the settingsTreeStore. Note that the call
// to .expand() is what triggers the userTreeStore to load its data.
settingsTreeStore.getRootNode().appendChild(userTreeStore.getRootNode()).expand();
Ext.create('Ext.tree.Panel', {
title: 'Admin Control Panel',
store: settingsTreeStore,
});