Javascript Ext JS：排序菜单项挂起浏览器

我有一个由组件生成的菜单，但是这个菜单的项目没有按照用户想要的字母顺序排序。所以，我想做的是对

onMenuBeforeShow

中的菜单项进行排序，但是如果我们稍后调用组件的

destroy

方法，那么这样做会挂起浏览器，这让我感到惊讶。下面是一个简单的片段，展示了这种行为：

Ext.onReady(function() {
    // Creating the menu
    var myMenu = Ext.create('Ext.menu.Menu', {
        width: 100,
        margin: '0 0 10 0',
        floating: false,  
        renderTo: Ext.getBody(),  
        items: [{
            text: 'A'
        },{
            text: 'C'
        },{
            text: 'B'
        }]
    });

    //Sorting the menu items. It doesn't work but it will show the issue
    var menuItems = myMenu.items.items;
    menuItems.sort(function(anItem, anotherItem) {
        var comparisonResult = 0;
        if (anItem.text < anotherItem.text) {
            comparisonResult = -1;
        } else if (anItem.text > anotherItem.text) {
            comparisonResult = 1;
        }
        return comparisonResult;
    });

    //If you uncomment and executed this, browser will die!!
    //myMenu.destroy();    


});

Ext.onReady（函数（）{
//创建菜单
var myMenu=Ext.create（'Ext.menu.menu'{
宽度：100，
边距：“0 10 0”，
浮动：假，
renderTo:Ext.getBody（），
项目：[{
文字：“A”
},{
文本：“C”
},{
文字：“B”
}]
});
//对菜单项进行排序。它不起作用，但会显示问题
var menuItems=myMenu.items.items；
排序（函数（anItem，anotherItem）{
var比较结果=0；
if（anItem.textanotherItem.text）{
比较结果=1；
}
返回比较结果；
});
//如果您取消注释并执行此操作，浏览器将死亡！！
//myMenu.destroy（）；
});

---

有没有人知道为什么会发生这种情况，或者知道如何正确地对菜单项进行排序？顺便说一下，我使用的是ExtJSV4.2，浏览器挂起是因为JavaScript引擎进入了一个无休止的循环；这是因为你搞乱了菜单的内部状态。不要那样做

而是在创建菜单之前对项目进行排序：

Ext.define('My.SortedMenu', {
    extend: 'Ext.menu.Menu',

    initComponent: function() {
        var me = this,
            items = me.items;

        me.items = Ext.Array.sort(items, function(a, b) {
            return a.text > b.text ?  1
                 : a.text < b.text ? -1
                 :                    0
                 ;
        });

        me.callParent();
    }
});

Ext.onReady(function() {
    // Creating the menu
    var myMenu = Ext.create('My.SortedMenu', {
        width: 100,
        margin: '0 0 10 0',
        floating: false,  
        renderTo: Ext.getBody(),  
        items: [{
            text: 'A'
        },{
            text: 'C'
        },{
            text: 'B'
        }]
    });

    // The menu is destroyed normally
    myMenu.destroy();    
});

Ext.define（'My.SortedMenu'{
扩展：“Ext.menu.menu”，
initComponent:function（）{
var me=这个，
items=me.items；
me.items=Ext.Array.sort（项，函数（a，b）{
返回a.text>b.text？1
：a.文本

我建议使用beforerender事件对项目进行排序。这样可以避免在菜单显示和隐藏时对它们进行一次又一次的排序。@LorenzMeyer在

beforerender

处理程序中对项目进行排序不会解决问题。创建后，不应更改任何容器中的

项

集合；改用公共API。@AlexTokarev我刚刚读了你的答案，明白了。我投你一票。