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

Question

我有一个由Component生成的菜单，但此菜单的项目不按用户需要的字母顺序排序。所以，我试图做的是对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 JS v4.2

Answer 1

浏览器挂起，因为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();    
});