Ext JS 4.1中的递归树菜单结构 [英] Recursive tree menu structure in Ext JS 4.1
问题描述
例如:
FOLDER
.. FOLDER
....项目
....文件夹
.... ..ITEM
...... ITEM
.... FOLDER
...
我遵循Sencha提出的最佳做法。我能够做一个级别的树菜单,但是当尝试为n级别做的时候,它失败了(实际上应用程序的工作原理是显示第一级的无限节点)。显然,问题是我的菜单项的模型定义,请参阅:
Ext.define('Dashboard.model.MenuItem' {
extends:'Dashboard.model.AbstractMenuElement',
fields:
[
{name:'content',type:'string'},
{name:'skeletonFlag',type:'string'},
{name:'fatherId',type:'int'}
],
关联:
[
{type:'hasMany',model:'Dashboard.model.MenuItem',name:'children',mapping:'items'}
]
});
所以这个模型递归地创建无限节点。但是...你知道我应该如何建模菜单项以实现递归菜单?
谢谢!
要在Ext JS中显示一个树状结构,我认为你最好的选择是使用 Ext.model.TreeModel , Ext.model.TreeStore 与 Ext.tree.Panel 。
这是一个简单的例子匹配您在问题中提到的结构:
Ext.create('Ext.tree.Panel',{
store:Ext.create('Ext.data.TreeStore',{
root:{
text:'Root Folder',
expanded:true,
children:[
{text:'Folder 1',children:[
{text:'Item 1',leaf:true}
]},
{text:'Folder 2',expanded:true,children:[
{text:'Item 2' leaf:true},
{text:'Item 3',leaf:true}
]},
{text:'Folder 3',children:[]}
]
}
}),
renderTo:Ext.getBody()
});
您可以查看 First of all, Im new at ExtJS. I wanted your help to let me know the best way to obtain a tree menu with n recursive items in it.
In example: FOLDER ..FOLDER ....ITEM ....FOLDER ......ITEM ......ITEM ....FOLDER ... Im following the best practises proposed by Sencha. I was able to do a tree menu with one level, but when trying to do it for n levels, it fails (in fact, the app works but shows infinite nodes of 1st level). Clearly the issue is the model definition of my menu item, see: So this model recursively creates infinite nodes. But... do you know how should i model my menu item in order to achieve the recursive menu? Thanks! To display a tree-like structure in Ext JS, I think your best bet is to use Ext.model.TreeModel, Ext.model.TreeStore in conjunction with Ext.tree.Panel. Here is an simple example to match the structure you mentioned in the question: You can view this example on Plunker. 这篇关于Ext JS 4.1中的递归树菜单结构的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!Ext.define('Dashboard.model.MenuItem',{
extend: 'Dashboard.model.AbstractMenuElement',
fields:
[
{name: 'content', type: 'string'},
{name: 'skeletonFlag', type: 'string'},
{name: 'fatherId', type: 'int'}
],
associations:
[
{type: 'hasMany', model: 'Dashboard.model.MenuItem', name: 'children', mapping: 'items'}
]
});
Ext.create('Ext.tree.Panel', {
store: Ext.create('Ext.data.TreeStore', {
root: {
text: 'Root Folder',
expanded: true,
children: [
{text: 'Folder 1', children: [
{text: 'Item 1', leaf: true}
]},
{text: 'Folder 2', expanded: true, children: [
{text: 'Item 2', leaf: true},
{text: 'Item 3', leaf: true}
]},
{text: 'Folder 3', children: []}
]
}
}),
renderTo: Ext.getBody()
});