extjs - 将菜单从 ExtJS 4.0 迁移到 4.1

Question

我一直在将我的项目从 ExtJS 4.0 迁移到 4.1。这张照片说明了一切：

这就是我构建菜单的方式：

function addItems(items) {
    var toolBarItems = [];
    for (var i = 0; i < items.length; i++) {
        var newItem = {
            text: items[i].Name,
            command: items[i].Command,
            height: 24,
            cls: 'toolbarbtn'
        };
        if (items[i].subItems === undefined || items[i].subItems === []) {
            newItem.handler = clickToolbarItemHandler;
        }
        else {
            newItem.menu = Ext.create('Ext.menu.Menu', {
                items: addChildItems(items[i].subItems)
             }); 
        }
        toolBarItems.push(Ext.create('Ext.button.Button', newItem));
    }
    return toolBarItems;
}

function addChildItems(subItems) {
    var subMenuItems = [];
    for (var i in subItems) {
        var item = subItems[i];

        var subMenuItem = {
            text: item.Name,
            command: item.Command,
            shadow: false,
            cls: 'toolbarbtn' 
        };

        if (item.subItems === undefined || item.subItems === []) {
            subMenuItem.handler = clickToolbarItemHandler;
        }
        else
            subMenuItem.menu = Ext.create('Ext.menu.Menu', {
                items: addChildItems(item.subItems)
            });
        subMenuItems.push(subMenuItem);
    }
    return subMenuItems;
}

这在 4.0 中没有发生，我似乎无法找到解释为什么现在会发生这种情况。有什么想法吗？

更新：

@Lolo：感谢您提醒我更新 css 文件。

不幸的是，它并没有解决问题。

我试图像这样添加一个 renderTo ：

function addChildItems(subItems) {
var subMenuItems = [];
for (var i in subItems) {
    var item = subItems[i];

    var subMenuItem = {
        text: item.Name,
        command: item.Command,
        cls: 'toolbarbtn' 
    };

    if (item.subItems === undefined || item.subItems === []) {
        subMenuItem.handler = clickToolbarItemHandler;
    }
    else
        subMenuItem.menu = Ext.create('Ext.menu.Menu', {
            //TODO: MIGV4
            shadow: false,
            renderTo: Ext.getBody(),
            items: addChildItems(item.subItems)
        });
    subMenuItems.push(subMenuItem);
}
return subMenuItems;

}

它确实解决了子菜单对齐问题，但仍然出现一些意外错误。图片再次说明了一切：

此错误仅在第一次渲染菜单时发生。当我再次测试时，它工作得很好。

有什么想法吗？？

Answer 1

我不认为这个问题与你的 JS 代码有关。看起来有些风格问题。你也切换到新css文件了吗？JS我通过包含4.1 的源和CSS4.0 的文件来重现此行为。见例子：http: //jsfiddle.net/ukqYU/2/

明显的解决方法是链接正确的 CSS 文件。

编辑：我发现在 4.1 中他们.x-layer稍微改变了类风格，这可能会导致这个问题。尝试更改position:absolute;为position: absolute !important;in .x-layer。那你应该很好。