Ext JS 4.1中的递归树菜单结构

本文介绍了Ext JS 4.1中的递归树菜单结构的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 首先，我在ExtJS的新的。我想要你的帮助让我知道获得一个树状菜单的最佳方式，其中有n个递归项目。 例如：

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.