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:
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'} ] });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:
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() });You can view this example on Plunker.
更多推荐
Ext JS 4.1中的递归树菜单结构
发布评论