2

我在需要动态创建的面板中设置了一个菜单系统。我创建了一个客户喜欢的模拟静态菜单，但菜单类别和项目需要通过 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”字段迭代该类可能是要走的路，但我不确定这是否可行。

4

3 回答 3

0

我让它像这样工作：

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到您的表单或容器中。希望这可以帮助！

于 2013-09-06T21:43:07.237 回答
0

您应该考虑使用 Tree 和 TreeStore。然后使用ui:'menu'or viewConfig { ui: 'menu' }config 属性将其与常规树区分开来。然后按照您的客户想要的方式设计它。

通过这种方式，您可以免费使用所有机制来动态处理数据和所有子菜单，您只需要在 CSS 方面获得一些创意。

于 2012-10-16T15:06:36.153 回答
-1

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

使用 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);
}
于 2019-09-15T19:28:58.977 回答