Dynamic ExtJS4：如何创建动态菜单？

我有一个菜单系统设置在一个面板，需要动态创建。我已经创建了一个客户端喜欢的模拟静态菜单，但是菜单类别和项目需要从存储区通过JSON加载

以下是我静态设置的前几个菜单项：

Ext.define('SimpleSearch.view.FacetSDL' ,{
extend: 'Ext.panel.Panel',
alias : 'widget.facetsdl',  //alias is referenced in MasterList.js
requires: ['SimpleSearch.store.SDLResults', 'FacetData' ],
title: 'Facet Search',
html: null,
frame: true,
layouts: 'fit',

items: [
  {
    id: 'group-menu',
    title: 'Browse',
    xtype: 'menu',
    plain: true,
    floating: false, 
    layouts: 'fit',
    items: [
      {
        text: 'Security',
        listeners:
          {
            click: function() { 
                     var groupmenu = Ext.ComponentQuery.query('#group-menu')[0];
                     groupmenu.hide() 
                     var securitymenu = Ext.ComponentQuery.query('#security-menu')[0];
                     securitymenu.setPosition(0,-groupmenu.getHeight(),false);
                     securitymenu.show()
                   }
          },
        menu: {        // <-- submenu by nested config object
          items: [
            {
              text: 'Classification',
              listeners:
              {
                click: function() { 
                     var groupmenu = Ext.ComponentQuery.query('#group-menu')[0];
                     groupmenu.hide() 
                     var securitymenu = Ext.ComponentQuery.query('#security-menu')[0];
                     var classificationmenu = Ext.ComponentQuery.query('#classification-menu')[0];
                     classificationmenu.setPosition(0,-groupmenu.getHeight() - securitymenu.getHeight(),false);
                     classificationmenu.show()
                }

Ext.define（'SimpleSearch.view.FacetSDL'{
扩展：“Ext.panel.panel”，
别名：“widget.facetsdl”，//别名在MasterList.js中引用
需要：['SimpleSearch.store.SDLResults'，'FacetData']，
标题：“方面搜索”，
html:null，
框架：对，
布局：“适合”，
项目：[
{
id:“组菜单”，
标题：“浏览”，
xtype:'菜单'，
朴素：没错，
浮动：假，
布局：“适合”，
项目：[
{
文本：“安全性”，
听众：
{
单击：函数（）{
var groupmenu=Ext.ComponentQuery.query（“#组菜单”）[0]；
groupmenu.hide（）
var securitymenu=Ext.ComponentQuery.query（“#安全菜单”）[0]；
securitymenu.setPosition（0，-groupmenu.getHeight（），false）；
securitymenu.show（）
}
},
菜单：{/您应该看看如何使用树和树存储。然后使用
ui:'menu'
或
viewConfig{ui:'menu'}
config属性将其与常规树区分开来。然后根据您的客户需要设置样式

通过这种方式，您可以免费使用所有机制来动态处理数据和所有子菜单，您只需在CSS方面获得一些创造性。
您应该考虑使用树和树存储。然后使用
ui:'menu'
或
viewConfig{ui:'menu'}
config属性将其与常规树区分开。然后根据客户的需要设置样式

通过这种方式，您可以免费使用所有机制来动态处理数据和所有子菜单，您只需在CSS方面发挥一些创造性。
我的工作原理如下：

var scrollMenu = Ext.create('Ext.menu.Menu');

    for (var i = 0; i < store.getCount(); ++i){
        var rec = store.getAt(i);

        var item =  new Ext.menu.Item({
            text: rec.data.DISPLAY_FIELD,
            value:rec.data.VALUE_FIELD,
            icon: 'js/images/add.png',
            handler: function(item){
                myFunction(item.value);  //Handle the item click
            }
        });

        scrollMenu.add(item);
    }

var scrollMenu=Ext.create（'Ext.menu.menu'）；
对于（var i=0；i

然后只需将
scrollMenu
添加到您的表单或容器中。希望这有帮助！
我的工作原理如下：

var scrollMenu = Ext.create('Ext.menu.Menu');

    for (var i = 0; i < store.getCount(); ++i){
        var rec = store.getAt(i);

        var item =  new Ext.menu.Item({
            text: rec.data.DISPLAY_FIELD,
            value:rec.data.VALUE_FIELD,
            icon: 'js/images/add.png',
            handler: function(item){
                myFunction(item.value);  //Handle the item click
            }
        });

        scrollMenu.add(item);
    }

var scrollMenu=Ext.create（'Ext.menu.menu'）；
对于（var i=0；i

然后只需将
scrollMenu
添加到表单或容器中。希望这有帮助！
此菜单是使用ExtJs动态创建的，数据是从Json加载的


查看我的演示和代码

在线演示：

加载的Json：

代码ExtJs:

//Description:  ExtJs - Create a dynamical menu from JSON
//Autor:        Ronny Morán <ronney41@gmail.com>

Ext.application({
    name : 'Fiddle',
    launch : function() {

        var formPanelFMBtn = Ext.create('Ext.form.Panel', {
                bodyPadding: 2,
                waitMsgTarget: true,
                fieldDefaults: {
                    labelAlign: 'left',
                    labelWidth: 85,
                    msgTarget: 'side'
                },
                items: [
                    {
                         xtype: 'container',
                         layout: 'hbox',
                         items: [

                         ]
                      }
                ]
        });

        var win = Ext.create('Ext.window.Window', {
                title: 'EXTJS DYNAMICAL MENU FROM JSON',
                modal: true,
                width: 680,
                closable: true,
                layout: 'fit',
                items: [formPanelFMBtn]
            }).show();

    //Consuming JSON from URL using method GET
    Ext.Ajax.request({
        url: 'https://api.myjson.com/bins/1d9tdd',
        method: 'get',
        timeout: 400000,
        headers: { 'Content-Type': 'application/json' },
        //params : Ext.JSON.encode(dataJsonRequest),
        success: function(conn, response, options, eOpts) {
                var result = Ext.JSON.decode(conn.responseText);
                //passing JSON data in 'result'
                viewMenuDinamical(formPanelFMBtn,result);
            },
        failure: function(conn, response, options, eOpts) {
                //Ext.Msg.alert(titleAlerta,msgErrorGetFin);
        }
    });

    }
});

//Generate dynamical menu with data from JSON
//Params:   formPanelFMBtn  - > Panel
//          result          - > Json data
function viewMenuDinamical(formPanelFMBtn,result){

    var resultFinTarea          = result;
    var arrayCategoriaTareas    = resultFinTarea.categoriaTareas;
    var containerFinTarea       = Ext.create('Ext.form.FieldSet', {
                                        xtype: 'fieldset',
                                        title: 'Menu:',
                                        margins:'0 0 5 0',
                                        flex:1,
                                        layout: 'anchor',
                                        //autoHeight: true,
                                        autoScroll: true,
                                        height: 200,
                                        align: 'stretch',
                                        items: [

                                        ]
    });
    var arrayMenu1              = [];

    //LEVEL 1
    for(var i = 0; i < arrayCategoriaTareas.length; i++)
    {
        var categoriaPadre          = arrayCategoriaTareas[i];
        var nombrePadre             = categoriaPadre.nombreCategoria;
        var hijosPadre              = categoriaPadre.hijosCategoria;
        var arrayMenu2              = [];

            //LEVEL 2
            for(var j = 0; j<hijosPadre.length; j++)
            {
                var categoriaHijo           = hijosPadre[j];
                var nombreHijo              = categoriaHijo.nombreHijo;
                var listaTareas             = categoriaHijo.listaTareas;
                var arrayMenu3              = [];

                    //LEVEL 3
                    for(var k = 0; k < listaTareas.length; k++)
                    {
                        var tarea = listaTareas[k];
                        var nombreTarea = tarea.nombreTarea;
                        var objFinLTres =
                        {
                            text: nombreTarea,
                            handler: function () {
                                alert("CLICK XD");
                            }
                        };
                        arrayMenu3.push(objFinLTres);
                    }

                var menuLevel3          = Ext.create('Ext.menu.Menu', {
                    items: arrayMenu3
                });

                var objFinLDos;
                    if(arrayMenu3.length > 0)
                    {
                        objFinLDos = {
                            text: nombreHijo,
                            menu:menuLevel3
                        };
                    }
                    else
                    {
                        //without menu parameter If don't have children
                        objFinLDos = {
                            text: nombreHijo
                        };
                    }

                arrayMenu2.push(objFinLDos);
            }
            var menuLevel2          = Ext.create('Ext.menu.Menu', {
                items: arrayMenu2
            });

            var objFinLUno;
            if(arrayMenu2.length > 0)
            {
                objFinLUno = {
                    text: nombrePadre,
                    menu:menuLevel2
                };
            }
            else
            {
                //without menu parameter If don't have children
                objFinLUno = {
                    text: nombrePadre
                };
            }

            arrayMenu1.push(objFinLUno);
    }

    var mymenu      = new Ext.menu.Menu({
                        items: arrayMenu1
                    });


    containerFinTarea.add({
            xtype: 'splitbutton',
            text: 'Example xD',
            menu: mymenu
        });

    formPanelFMBtn.add(containerFinTarea);
}

//Description:ExtJs-从JSON创建动态菜单
//自动：罗尼·莫兰
外部应用程序({
名字：“小提琴”，
启动：函数（）{
var formPanelFMBtn=Ext.create（'Ext.form.Panel'{
车身衬垫：2，
waitMsgTarget：是的，
字段默认值：{
labelAlign:'左'，
标签宽度：85，
msgTarget:“侧边”
},
项目：[
{
xtype:'容器'，
布局：“hbox”，
项目：[
]
}
]
});
var win=Ext.create（'Ext.window.window'{
标题：“来自JSON的EXTJS动态菜单”，
莫代尔：是的，
宽度：680，
closable:是的，
布局：“适合”，
项目：[formPanelFMBtn]
}).show（）；
//使用GET方法从URL使用JSON
Ext.Ajax.request({
网址：'https://api.myjson.com/bins/1d9tdd',
方法：“get”，
超时：400000，
标题：{'Content-Type'：'application/json'}，
//params:Ext.JSON.encode（dataJsonRequest），
成功：功能（连接、响应、选项、EOPT）{
var result=Ext.JSON.decode（conn.responseText）；
//在“result”中传递JSON数据
视图纵向（formPanelFMBtn，结果）；
},
故障：功能（连接、响应、选项、EOPT）{
//Ext.Msg.alert（标题栏、MSGERROGETFIN）；
}
});
}
});
//使用JSON中的数据生成动态菜单
//参数：formPanelFMBtn->Panel
//结果->Json数据
函数视图纵向（formPanelFMBtn，结果）{
var resultfinterea=结果；
var arrayCategoriaTareas=ResultIntrea.categoriaTareas；
var containerfinterea=Ext.create（'Ext.form.FieldSet'{
xtype:“字段集”，
标题：“菜单：”，
边距：'0 5 0'，
弹性：1，
布局：“锚定”，
//自动高度：正确，
autoScroll：是的，
身高：200，
对齐：“拉伸”，