Recursive tree menu structure in Ext JS 4.1

问题

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

....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!

回答1:

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.

来源：https://stackoverflow.com/questions/12540001/recursive-tree-menu-structure-in-ext-js-4-1

标签

javascript

extjs