Javascript ExtJS4.1中的递归树菜单结构

Javascript ExtJS4.1中的递归树菜单结构,javascript,menu,extjs,Javascript,Menu,Extjs,首先,我是ExtJS的新手。我希望您能帮助我了解获取包含n个递归项的树菜单的最佳方法。 例如: 文件夹 …文件夹 ……项目 …文件夹 ……项目 ……项目 …文件夹 我遵循Sencha提出的最佳实践。我可以用一个级别创建一个树菜单,但当我尝试用n个级别创建树菜单时,它失败了(事实上,应用程序可以工作,但显示了第一个级别的无限节点)。显然,问题在于菜单项的型号定义,请参见: Ext.define('Dashboard.model.MenuItem',{ extend: 'Dashboard.mod

首先,我是ExtJS的新手。我希望您能帮助我了解获取包含n个递归项的树菜单的最佳方法。 例如:

文件夹

…文件夹

……项目

…文件夹

……项目

……项目

…文件夹

我遵循Sencha提出的最佳实践。我可以用一个级别创建一个树菜单,但当我尝试用n个级别创建树菜单时,它失败了(事实上,应用程序可以工作,但显示了第一个级别的无限节点)。显然,问题在于菜单项的型号定义,请参见:

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 JS中显示树状结构,我认为最好的方法是结合使用

下面是一个简单的例子,与您在问题中提到的结构相匹配:

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()
});

您可以在Plunker上查看。

非常感谢。这正是我想要的。