PopupMenuBarItem中的项目对齐方式

Question

我在Dojo中绝对是新手，所以我的问题可能太明显了。抱歉。 我已经以编程方式创建了复杂菜单，包括MenuBar，基于从DB中选择的行。 除了一个问题之外，所有问题都得到了解决：最终项目和子菜单项目的对齐方式不同。How it looks like所有子菜单主要呈现在同一行中。只有添加MenuSeparator，我才能分开它们。 我失去了我在互联网上找到的例子，它确切地显示了我需要的东西（包括子菜单的右箭头）Example。我使用了完全相同的算法来创建菜单。但我无法得到相同的结果。 请帮忙。

我注意到图片无法访问。 在纯文本中，它看起来像：

                 Final 1
                 Final 2
                 Final 3
      DropDown 1
      DropDown 2

缩进取决于子菜单宽度。

想想，现在我知道发生了什么（不知道，如何解决它）。 问题是小部件呈现。 最终菜单选项（叶）呈现为表格行（ tr 和 td 标记）。 PopupMenuItem呈现为行之间的div 。 再一次，我不知道如何避免它。

这是代码。几个笔记：

    1.The rows is the two dimensional array
    2.The rows with ParentID=0 are the MenuBarItems
    3.pM is the MenuBar widget

    createMenu: function (rows, pM) {

    var me = this; // for references from the event handlers, where 'this' means event origin (instead of lang.hitch)
    // First define the indexes of the DB fields
    var xMenu_Id;
    var xMenu_Title;
    var xParent;
    var xURL;
    var xUser_Roles;
    var i;
    for (i = 0; i < rows[0].length; i++) {
        switch (rows[0][i]) {
            case 'Menu_Id':
                xMenu_Id = i;
                break;
            case 'Menu_Title':
                xMenu_Title = i;
                break;
            case 'Parent':
                xParent = i;
                break;
            case 'URL':
                xURL = i;
                break;
            case 'User_Roles':
                xUser_Roles = i;
                break;
        }
    }
    // Define the function to filter the menu rows
    // Parameters:  r - two-dimentional rows array
    //              p - criterion (the parent menu ID)
    //              idx - index of needed field
    //              f - returned filtered array (no need to use in calling statement)
    var filterArray = function (r, p, idx, f) {
        f = dojo.filter(r, function (item) {
            return item[idx] == p;
        });

        return f;
    }
    // Define the recurcive function to create the sub menu tree for Menu bar item
    // Parameters: parentMenu - the menu to add childs
    //             parentID   - the ID of parent menu to select direct children
    //             role       - current user role
    var subMenuFactory = function (parentMenu, parentID, role) {
        var i;
        var fa = filterArray(rows, parentID, xParent);
        var sub;

        for (i = 0; i < fa.length; i++) {
            if (fa[i][xUser_Roles].indexOf(role) >= 0 || fa[i][xUser_Roles] == 'all') {
                if (fa[i][xURL] != '0') { // leaf
                    url = fa[i][xURL];
                    parentMenu.addChild(new MenuItem({
                        dir: 'ltr',
                        label: fa[i][xMenu_Title],
                        action: fa[i][xURL],
                        onClick: function () { me.menuAction(this.action); }
                    }));
                }
                else { // DropDown Node
                    sub = new DropDownMenu({ dir: 'ltr' });
                    subMenuFactory(sub, fa[i][xMenu_Id], role);
                    parentMenu.addChild(new MenuSeparator({}));
                    parentMenu.addChild(new PopupMenuBarItem({
                        dir: 'ltr',
                        label: fa[i][xMenu_Title],
                        popup: sub
                    }));
                }
            }
        }
    }
    // Get array of Menu bar items

    var filtered = filterArray(rows, 0, xParent);
    var pSub;
    var user_Role = this.user.Role;
    for (i = 0; i < filtered.length; i++) {
        if (filtered[i][xUser_Roles].indexOf(user_Role) >= 0 || filtered[i][xUser_Roles]=='all') {
            if (filtered[i][xURL] != '0') // leaf
            {
                pM.addChild(new MenuBarItem({
                    dir: 'ltr',
                    label: filtered[i][xMenu_Title],
                    action: filtered[i][xURL],
                    onClick: function () { me.menuAction(this.action); }
                }));
            }
            else { // DropDown Node
                pSub = new DropDownMenu({ dir: 'ltr' });
                subMenuFactory(pSub, filtered[i][xMenu_Id],user_Role);
                pM.addChild(new PopupMenuBarItem({
                    dir: 'ltr',
                    label: filtered[i][xMenu_Title],
                    popup: pSub
                }));
            }
        }
    }


},

Answer 1

我发现了什么问题。在所需的定义数组中，我错误地导入了PopupMenu bar 项而不是PopupMenuItem。在函数中，参数命名为right-PopupMenuItem，但显然它无济于事......

感谢所有试图帮助我的人。

此致 颊