Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Atlanta, GA
    Posts
    39
    Vote Rating
    0
    RoyW is on a distinguished road

      0  

    Default ExtJS 3.4.0 Menus do not work in any browser other than IE

    ExtJS 3.4.0 Menus do not work in any browser other than IE


    The following code creates a simple right click menu.
    In ExtJS 3.3.1 it works fine in all browsers
    In ExtJS 3.4.0 it only works in IE (have only tested in IE7)
    tested
    IE7
    FireFox 4.0.1
    Chrome
    Safari


    PHP Code:
    <html>
    <
    head>
        <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <
    title>Menu Example</title>

        <!-- ** 
    CSS ** -->
        <
    link rel="stylesheet" type="text/css" href="js/extjs_3_4_0/resources/css/ext-all.css" />
                       

        <!-- 
    ExtJS librarybase/adapter -->
        <
    script type="text/javascript" src="js/extjs_3_4_0/adapter/ext/ext-base-debug.js"></script>

        <!-- ExtJS library: all widgets -->
        <script type="text/javascript" src="js/extjs_3_4_0/ext-all-debug.js"></script>
        <script type="text/javascript">


    Ext.onReady(function(){

        // create a panel Grid
        var panel = new Ext.Panel({
            height: 350,
            width: 600,
            title: 'Menu Test'
        });

        var menuConfig = [
            {
                text: "Test Menu 1"
            },
            {
                text: "Test Menu 2"
            },
            {
                text: "Test Menu 3"
            }
        ];

        panel.on('render', function () {
            var menu = new Ext.menu.Menu(menuConfig);

            Ext.getBody().on("contextmenu", function (evtObj) {
                        evtObj.stopEvent();
                        menu.showAt(evtObj.getXY());
                    }, null, {preventDefault: true});

        });

        // render the panel to the specified div in the page
        panel.render('menu-example');

    });
        </script>


    </head>
    <body>

        <div id="menu-example"></div>
    </body>
    </html> 
    The code produces the error
    this.indexOf is not a function, ext-base-debug.js line 1065

    As a workaround I added a null check in ext-base-debug.js. This seems to fix the problem but I am not sure what other damage may be caused by doing this.
    PHP Code:
        /**
         * Removes the specified object from the array.  If the object is not found nothing happens.
         * @param {Object} o The object to remove
         * @return {Array} this array
         */
        
    remove : function(o){
            if(
    this.indexOf == null){
                return 
    this;
            }
            var 
    index this.indexOf(o);
            if(
    index != -1){
                
    this.splice(index1);
            }
            return 
    this;
        } 

  2. #2
    Sencha User
    Join Date
    Jun 2011
    Posts
    1
    Vote Rating
    0
    lpwork2011 is on a distinguished road

      0  

    Default


    hi,i met the same problem! omg!

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    3
    Vote Rating
    0
    thor612 is on a distinguished road

      0  

    Default


    I ran at the same problem, and my solution was in menu config (and I believe it will help you guys to).

    Instead of passing an array of menu items as a menu config, pass an item containing "items" property.

    In your case you'd need to change the "menuConfig" to:

    Code:
    var menuConfig = {
        items: [
            {
                text: "Test Menu 1"
            },
            {
                text: "Test Menu 2"
            },
            {
                text: "Test Menu 3"
            }
        ]
    };
    I think it's because Ext.menu.Menu is expecting a config object for itself and not an array of all its items.

  4. #4
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Atlanta, GA
    Posts
    39
    Vote Rating
    0
    RoyW is on a distinguished road

      0  

    Default


    But if you look at initComponent of Ext.menu.Menu it converts the array into the object you describe

    Code:
            if(Ext.isArray(this.initialConfig)){
                Ext.apply(this, {items:this.initialConfig});
            }

  5. #5
    Sencha User
    Join Date
    Jul 2011
    Posts
    3
    Vote Rating
    0
    thor612 is on a distinguished road

      0  

    Default


    Yes, but I think they forgot to convert it in constructor. And when parent (Ext.Container) is constructed with an array, it fails.

  6. #6
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Atlanta, GA
    Posts
    39
    Vote Rating
    0
    RoyW is on a distinguished road

      0  

    Default


    Hmm, tested that and it does work. It means I will have to go through and change all my menu configs from
    Code:
    var menuConfig = [
            {
                text: "Test Menu 1"
            },
            {
                text: "Test Menu 2"
            },
            {
                text: "Test Menu 3"
            }
        ];
    
    to
    Code:
    var menuConfig = {items: [
            {
                text: "Test Menu 1"
            },
            {
                text: "Test Menu 2"
            },
            {
                text: "Test Menu 3"
            }
        ]};

  7. #7
    Sencha User
    Join Date
    Jul 2011
    Posts
    3
    Vote Rating
    0
    thor612 is on a distinguished road

      0  

    Default


    Well, if you need this in more places, you'll maybe wanna override Ext.menu.Menu's constructor instead:
    Code:
    Ext.menu.Menu.prototype.constructor = function(cfg) {
         if (Ext.isArray(cfg)) {
            cfg = {
                 items: cfg
            };
         }
         Ext.menu.Menu.superclass.constructor.call(this, cfg);
    };
    If you wonder why I didn't override constructor using Ext.override method, its' because I had some issues when overriding constructors like that... I don't recall what was it right now...

    P.S. I didn't test this code, so there might be some spelling errors or something... But I hope you got the idea :-)

Thread Participants: 2