PopupMenuBarItem 中的项目对齐

Question

我绝对是 Dojo 的新手，所以我的问题可能太 evident 了。对不起。我以编程方式创建了复杂的菜单，包括基于从数据库中选择的行的 MenuBar。所有问题都已解决，因为ide一个问题：最终项目和子菜单项目的对齐方式不同。How it looks like 所有子菜单主要在同一行中呈现。只有通过添加 MenuSeparator，我才能 divide 它们。我迷路了我在 Internet 上找到了示例，它准确地显示了我需要的内容（包括子菜单的右箭头）Example。我使用完全相同的算法来创建菜单。但我无法得到相同的结果。请帮忙。

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

                 Final 1
                 Final 2
                 Final 3
      DropDown 1
      DropDown 2

缩进取决于子菜单宽度。

想一想，现在我知道发生了什么（虽然不知道如何解决）。问题是小部件渲染。最后的菜单选项（叶）呈现为 table 行（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

我找到问题所在了。在所需的定义数组中，我错误地导入了 PopupMenubarItem 而不是 PopupMenuItem。在函数中参数被命名为 right - PopupMenuItem，但显然它帮不上什么忙...

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

此致，吉娜

PopupMenuBarItem 中的项目对齐

Items alignment in the PopupMenuBarItem

dojo