如何在树中显示嵌套数据？ [英] How do I show nested data into a tree?
问题描述
我总是感谢任何进一步的建议。
我正在尝试开发一个简单的extJS Ext 4.0.2a脚本，将一些嵌套数据显示为Drag& Drop树。
要尝试，我使用一个简单的例子从 http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader
数据以users.json文件形式给出：
{
users：[
{
id：123，
name：Ed，
orders：[
{
id：50，
total：100，
order_items：[
{
id：20，
price：40，
quantity ：2，
product：{
id：1000，
name：MacBook Pro
}
}，
{
id：21，
price：20，
quantity：3，
product：{
id：1001，
name：iPhone
}
}
]
}
]
}
]
}
我希望将数据显示为树，其第一级节点是用户，第二级节点是订单，等等。
从同一个文档，我学习如何定义我的模型（我相信）：
Ext.define（User，{
扩展：'Ext.data.Model'，
fields：[
'id'，'name'
]，
hasMany：{model：'Order' ，名称：'orders'}，
proxy：{
type：'ajax'，// rest
url：'users.json'，
reader： {
type：'json'，
root：'users'
}
}
}）
;
Ext.define（Order，{
extends：'Ext.data.Model'，
fields：[
'id'，'total'
]，
hasMany：{model：'OrderItem'，name：'orderItems'，associationKey：'order_items'}，
belongsTo：'User'
}） ;
Ext.define（OrderItem，{
extends：'Ext.data.Model'，
fields：[
'id'，'price' 'number'，'order_id'，'product_id'
]，
belongsTo：['Order'，{model：'Product'，associationKey：'product'}]
}）;
Ext.define（Product，{
extends：'Ext.data.Model'，
fields：[
'id'，'name'
]，
hasMany：'OrderItem'
}）;
接下来，我定义树存储和树面板（对于某些选定的字段）：
var store = Ext.create（'Ext.data.TreeStore'，{
model：'User'，
autoLoad：true，
autoSync：true，
root：{
name：Root node，
id：'0'，
expanded：true
}，
分类：[{
属性：'id'，
direction：'ASC'// DESC
}]
}）;
var tree = Ext.create（'Ext.tree.Panel'，{
store：store，
displayField：'name'，//什么节点显示（default- > text）
列：[{
xtype：'treecolumn'，
text：'name'，
dataIndex：'name'，
width：
sortable：true
}，{
text：'total'，
dataIndex：'total'，
width：150，
flex：1，
sortable：true
}，{
text：'price'，
dataIndex：'price'，
width：50，
flex：1，
sortable：true
}，{
text：'quantity'，
dataIndex：'quantity'，
width：150，
flex：1
}，{
text：'id'，
dataIndex：'id'，
flex：1，
width：15，
sortable：true
}]，
可折叠：true，
viewConf ig：{
plugins：{
ptype：'treeviewdragdrop'，// see Ext.tree.plugin.TreeViewDragDrop
nodeHighlightColor：'7B68EE'，
nodeHighlightOnDrop：true，
nodeHighlightOnRepair：true，
enableDrag：true，
enableDrop：true
}
}，
renderTo：'tree-div'，
height： 300，
width：900，
title：'Items'，
useArrows：true，
dockedItems：[{
xtype：'toolbar'，
项目：[{
文本：全部展开，
处理程序：function（）{
tree.expandAll（）;
}
}，{
文本：'全部折叠'，
处理程序：function（）{
tree.collapseAll（）;
}
}]
}]
}）;
}）;
我看到面板，根和第一级用户（作为根的子节点）。我看不到任何子节点（orders，order_items等）。
我仔细看了一些帖子，改进了很多东西，但仍然想念得到一个工作的解决方案。
我正面对同样的任务，首先很高兴遇到你的帖子！
经过5个小时的正式文件浏览：
- http://docs.sencha.com/ext-js/4-0/#!/guide/data
- http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader
我能够填充我的嵌套树存储没有什么比这更好：
（在我的情况下，主要模型是Camgroup它有许多相机作为凸轮：允许为每个组使用.cams（））
Ext.define（'AV .store.sCamgroups'，{
extends：'Ext.data.TreeStore'，
model：'AV.model.Camgroup'，
autoLoad：true，
root：{
展开：true，
文本：分组相机
}，
代理：{
类型：'ajax'，
url：'data / camgroups.json，
reader：{
type：'json'，
root：'camgroups'，
successProperty：'success'
}
}，
listeners：{
load：function（thisStore，rootnode，records，successful，eOpts）{
records.forEach（function（group）{
group.cams（）。each（function cam）{
group.appendChild（{
text：cam.get（'name'），
leaf：true
}）;
}）;
}）;
}
}
}）;
camgroups.json返回smth这样：
{
success：true，
camgroups：[{
id：group1，
name：外观摄像头，
cam：[{
id：cam3，
name：Camera three，
url
img：images / cams / 3.png，
ratio：1.33
}，{
id：cam4，
name：Camera four，
url：...，
img：images / cams / 4.png，
ratio ：1.33
}]
}]
}
希望这个将帮助您，不断寻找一个更好的解决方案（概念定义适当的读者）。
再次，在Ext.data.reader.Reader中，我可以看到Reader具有config属性implicitIncludes，这被认为是自动解析嵌套在o中的模型反应对象中的其他模型，但是我不能使其工作=（
干杯，
Ilya
Further progress. Please see at http://www.sencha.com/forum/showthread.php?153986-Empty-column-something-I-can-t-get-with-Ext.data.TreeStore-and-or-Ext.tree.Panel
I always appreciate any further advise.
I am trying to develop a simple extJS Ext 4.0.2a script to display some nested data as a Drag&Drop tree. To try, I use a simple example from http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader
Data are given as a users.json file:
{
"users": [
{
"id": 123,
"name": "Ed",
"orders": [
{
"id": 50,
"total": 100,
"order_items": [
{
"id" : 20,
"price" : 40,
"quantity": 2,
"product" : {
"id": 1000,
"name": "MacBook Pro"
}
},
{
"id" : 21,
"price" : 20,
"quantity": 3,
"product" : {
"id": 1001,
"name": "iPhone"
}
}
]
}
]
}
]
}
I wish to display data as a tree, whose first level nodes are users, second level nodes are orders, and so on.
From the same doc, I learn how to define my models (I believe):
Ext.define("User", {
extend: 'Ext.data.Model',
fields: [
'id', 'name'
],
hasMany: {model: 'Order', name: 'orders'},
proxy: {
type: 'ajax', // rest
url : 'users.json',
reader: {
type: 'json',
root: 'users'
}
}
})
;
Ext.define("Order", {
extend: 'Ext.data.Model',
fields: [
'id', 'total'
],
hasMany : {model: 'OrderItem', name: 'orderItems', associationKey: 'order_items'},
belongsTo: 'User'
});
Ext.define("OrderItem", {
extend: 'Ext.data.Model',
fields: [
'id', 'price', 'quantity', 'order_id', 'product_id'
],
belongsTo: ['Order', {model: 'Product', associationKey: 'product'}]
});
Ext.define("Product", {
extend: 'Ext.data.Model',
fields: [
'id', 'name'
],
hasMany: 'OrderItem'
});
next, I define a tree store and a tree panel (for some selected fields):
var store = Ext.create('Ext.data.TreeStore', {
model: 'User',
autoLoad: true,
autoSync: true,
root: {
name: "Root node",
id: '0',
expanded: true
},
sorters: [{
property: 'id',
direction: 'ASC' // DESC
}]
});
var tree = Ext.create('Ext.tree.Panel', {
store: store,
displayField: 'name', // what nodes display (default->text)
columns: [{
xtype: 'treecolumn',
text: 'name',
dataIndex: 'name',
width: 150,
sortable: true
}, {
text: 'total',
dataIndex: 'total',
width: 150,
flex: 1,
sortable: true
}, {
text: 'price',
dataIndex: 'price',
width: 50,
flex: 1,
sortable: true
},{
text: 'quantity',
dataIndex: 'quantity',
width: 150,
flex: 1
}, {
text: 'id',
dataIndex: 'id',
flex: 1,
width: 15,
sortable: true
}],
collapsible: true,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop', // see Ext.tree.plugin.TreeViewDragDrop
nodeHighlightColor : '7B68EE',
nodeHighlightOnDrop : true,
nodeHighlightOnRepair: true,
enableDrag: true,
enableDrop: true
}
},
renderTo: 'tree-div',
height: 300,
width: 900,
title: 'Items',
useArrows: true,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Expand All',
handler: function(){
tree.expandAll();
}
}, {
text: 'Collapse All',
handler: function(){
tree.collapseAll();
}
}]
}]
});
});
I see the panel, the root and the first level users (as subnodes of the root). I do not see any subnodes (orders, order_items and so on).
I looked carefully at a number of posts, improved things quite a lot, but still miss to get a working solution.
I am facing the same task, and first was glad to run into your post! After 5 hours of exploring the official docs regarding to it:
- http://docs.sencha.com/ext-js/4-0/#!/guide/data
- http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader
I was able to populate my nested treestore with nothing better than this:
(in my case the main model is Camgroup which hasMany Camera as 'cams': which allows to use .cams() for every group)
Ext.define('AV.store.sCamgroups', {
extend: 'Ext.data.TreeStore',
model: 'AV.model.Camgroup',
autoLoad: true,
root: {
expanded: true,
text: "Grouped Cameras"
},
proxy: {
type: 'ajax',
url: 'data/camgroups.json',
reader: {
type: 'json',
root: 'camgroups',
successProperty: 'success'
}
},
listeners: {
load: function(thisStore, rootnode, records, successful, eOpts){
records.forEach(function(group){
group.cams().each(function(cam) {
group.appendChild({
text: cam.get('name'),
leaf: true
});
});
});
}
}
});
camgroups.json returns smth like this:
{
success: true,
camgroups: [{
"id" : "group1",
"name" : "Exterior cams",
"cams" : [{
"id" : "cam3",
"name" : "Camera three",
"url" : "...",
"img" : "images/cams/3.png",
"ratio" : 1.33
},{
"id" : "cam4",
"name" : "Camera four",
"url" : "...",
"img" : "images/cams/4.png",
"ratio" : 1.33
}]
}]
}
Hope this will help you though keep looking for a better solution (prob defining a proper reader).
Again, in "Ext.data.reader.Reader" I can see that Reader has config property 'implicitIncludes' which is supposed 'to automatically parse models nested within other models in a response object', but I cannot make it working =(
Cheers, Ilya
这篇关于如何在树中显示嵌套数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
