ExtJS 4:带有静态和动态加载数据的 TreeStore? [英] ExtJS 4: TreeStore with both static and dynamically-loaded data?
本文介绍了ExtJS 4:带有静态和动态加载数据的 TreeStore?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在制作一个看起来像这样的 TreePanel:
I'm making a TreePanel that looks like this:
目前我用以下代码模拟"了它:
At the moment I have it "mocked up" with the following code:
treePanel.setRootNode({
text: 'Root',
expanded: true,
children: [
{
text: 'General Settings',
icon: kpc.cfg.baseUrl.img+'/icon_gears-bluegreen.gif',
leaf: true
},
{
text: 'Users',
icon: kpc.cfg.baseUrl.img+'/icon_users-16x16.gif',
expanded: true,
children: [
{
text: 'Dummy User 1',
icon: kpc.cfg.baseUrl.img+'/icon_user-suit.gif',
leaf: true
},
{
text: 'Dummy User 2',
icon: kpc.cfg.baseUrl.img+'/icon_user-suit.gif',
leaf: true
},
{
text: 'Dummy User 3',
icon: kpc.cfg.baseUrl.img+'/icon_user-suit.gif',
leaf: true
},
{
text: 'Dummy User 4',
icon: kpc.cfg.baseUrl.img+'/icon_user-suit.gif',
leaf: true
}
]
}
]
});
如何动态加载单个用户(即,通过商店)?换句话说,我如何制作一个混合了静态和动态加载项目的 TreeStore?
How can I load the individual users dynamically (i.e., via a store)? In other words, how do I make a TreeStore that is a mixture of both static and dynamically-loaded items?
谢谢!
推荐答案
最适合我的解决方案是:
The solution that worked best for me was to:
- 创建两个树存储——一个存储静态内容,另一个设置为从服务器加载我的用户模型.
- 将动态加载的树图形化"到静态树上.
我写了一个小教程,其中包括一个可运行的演示 此处(以防有人想要更详细的答案),但在较高级别上,代码如下所示:
I wrote up a little tutorial that includes a runnable demo here (in case anyone wants a more detailed answer), but at a high level the code looks like this:
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,
});
这篇关于ExtJS 4:带有静态和动态加载数据的 TreeStore?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文