Question

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

enter image description here

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

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;

}

它确实解决了子菜单对齐问题，但仍然会发生一些意外错误。图片再说一遍：

enter image description here

只有在第一次渲染菜单时才会出现此错误。当我再次测试它工作得很好。

有什么想法吗？

Answer 1

我不认为这个问题与你的JS代码有关。看起来像是一些风格问题。您是否也切换到新的css文件？我通过包含4.1中的JS源和4.0中的CSS文件来重现此行为。请参阅示例：http://jsfiddle.net/ukqYU/2/

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

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

将菜单从ExtJS 4.0迁移到4.1

1 个答案: