Question

我在面板中设置了一个需要动态创建的菜单系统。我创建了一个客户喜欢的模拟静态菜单，但菜单类别和项目需要通过商店的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()
                }

我在想，也许创建一个加载所有必要数据的类，然后在“items”字段中遍历该类可能是要走的路，但我不确定这是否有用。

Answer 1

您应该查看使用Tree和TreeStore。然后使用ui:'menu'或viewConfig { ui: 'menu' }配置属性将其与常规树区分开来。然后根据客户的需要设计样式。

通过这种方式，您可以自由地动态处理数据以及所有子菜单，您只需要在CSS方面获得一些创意。

Answer 2

我得到了这样的工作：

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

然后只需将scrollMenu添加到您的表单或容器中。希望这有帮助！

Answer 3

此菜单是使用ExtJs动态创建的，数据是从Json加载的。

查看我的演示和代码。

在线演示： https://fiddle.sencha.com/#view/editor&fiddle/2vcq

Json已加载： https://api.myjson.com/bins/1d9tdd

代码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);
}

ExtJs 4：如何创建动态菜单？

3 个答案: